Menu principal com efeito Hover do mouse em imagem

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Menu principal com efeito Hover do mouse em imagem

Mensagem por Hagatsune 16.09.18 18:44

Detalhes da questão


Endereço do fórum: http://bloodypalacerpg.forumeiros.com/forum
Versão do fórum: phpBB2

Descrição


Olá, recentemente mudei meu template do fórum e no anterior eu havia conseguido um código de CSS onde ao passar o mouse sobre a imagem do ícone do menu (exp: índice) ele trocava pra outra imagem do ícone. Só que ao trocar pro novo templete, fiz novos botões pro menu, peguei o código do outro template CSS que fazia esse efeito hover funcionar mas ficou bugado... Gostaria de saber se teria outro código ou se há algo errado nesse que tenho.

Menu principal com efeito Hover do mouse em imagem Lx8One2
Menu principal com efeito Hover do mouse em imagem HyyH0AD Hover

O código que funcionava no outro template. Se quiser ver o bug que ficou no menu, está ativado só pro índice...
Código:
#i_icon_mini_index{width:80px; height:22px; background:url(https://imgur.com/Lx8One2.png) no-repeat 0 0;}
#i_icon_mini_index:hover{width:80px; height:22px; background:url(https://imgur.com/hyyH0AD.png) no-repeat 0 -22px;}

Grata!
Hagatsune

Hagatsune
**

Membro desde : 19/06/2014
Mensagens : 63
Pontos : 95

http://valkyrierpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu principal com efeito Hover do mouse em imagem

Mensagem por Hagatsune 18.09.18 5:52

up
Hagatsune

Hagatsune
**

Membro desde : 19/06/2014
Mensagens : 63
Pontos : 95

http://valkyrierpg.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Menu principal com efeito Hover do mouse em imagem

Mensagem por tikky 18.09.18 17:33

Olá @Hagatsune,
Mude o seu código, para o seguinte código:
Código:
#i_icon_mini_index {
    width: 100px;
    height: 22px;
    background: url("https://i.imgur.com/Lx8One2.png");
    background-size: cover;
    transition: background 0.25s ease-in-out;
}
#i_icon_mini_index:hover {
    background: url("https://i.imgur.com/hyyH0AD.png");
    height: 22px;
    width: 100px;
    background-size: cover;
}


Cordialmente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu principal com efeito Hover do mouse em imagem

Mensagem por Hagatsune 18.09.18 23:35

Obrigado!! Funcionou perfeitamente, pode fechar S2
Hagatsune

Hagatsune
**

Membro desde : 19/06/2014
Mensagens : 63
Pontos : 95

http://valkyrierpg.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Menu principal com efeito Hover do mouse em imagem

Mensagem por tikky 19.09.18 7:01

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos