[Resolvido] Mudar a cor da imagem do menu ao passar o mouse

Olá!

Adicionei imagens ao meu menu e gostaria de saber se é possível alterar a cor quando o mouse passar por cima.

A imagem é assim:

E gostaria que ficasse assim:


Já tentei o seguinte código na folha css:

a.mainmenu {
background:url(https://i.servimg.com/u/f60/13/30/30/97/coolte11.png);
cursor:allowed;
}
a.mainmenu:hover {
background:url(https://i.servimg.com/u/f60/13/30/30/97/coolte12.png);
cursor:allowed;
}

Mas não deu certo.

A versão do meu fórum é PhpBB 3 e no momento não estou usando nenhum código CSS.

É possível alterar para essa cor quando o mouse passa por cima da imagem?

Boa noite.

Creio que o botão terá de estar editado para isso, mas não tanho a certeza.

No site em que criei o botão, eles pedem para salvar as duas imagens e adicionar o seguinte código HTML:

<img src="cooltext475192185.png" onmouseover="this.src='cooltext475192185MouseOver.png';" onmouseout="this.src='cooltext475192185.png';" />

Mas não sei como adaptá-lo ao fórum.

É possível fazer essa alteração de cor quando o mouse passa por cima da imagem com algum outro código?

Olá,
Leia este tutorial e veja se ajuda!
https://ajuda.forumeiros.com/tutoriais-astucias-f5/tutorial-mudar-imagem-ao-passar-o-mouse-t21619.htm

Olá, Talissa!

Esse código HTML não altera as imagens do Menu, que são as que quero que tenham a cor alterada ao passar o mouse.

Tem algum código específico para as imagens do Menu?

Boa noite,

Primeiramente remova as imagens do painel de controle, somente usará imagens por meio de códigos CSS! Para remover aceda à:
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilos CSS

Tem sim como fazer, será este o código que deverá usar, adicionando uma vez cada um da forma como vou explicar agora:

classe {
background-image: url(ENDERECO_DA_IMAGEM);
padding: ALTURApx LARGURApx;
}

classe:hover {
background-image: url(ENDERECO_DA_IMAGEM_MOUSE_OVER);
padding: ALTURApx LARGURApx;
}

Nos campos altura e largura deverá colocar metada da altura e metade da largura da imagem que pretende colocar, agora teremos que ver qual é a classe para cada botão. Onde tem classe em laranja mude para isso:

#i_icon_mini_index - Início
#i_icon_mini_portal - Portal
#i_icon_mini_calendar - Calendário
#i_icon_mini_faq - FAQ
#i_icon_mini_search - Buscar
#i_icon_mini_members - Membros
#i_icon_mini_groups - Grupos
#i_icon_mini_profile - Perfil
#i_icon_mini_message - Sem novas MPs
#i_icon_mini_new_message - Novas MPs
#i_icon_mini_login - Login
#i_icon_mini_logout - Logout

Até mais.