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.

efeito - Menu principal com efeito Hover do mouse em imagem Lx8One2
efeito - 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 : 7806
Pontos : 9049

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 : 7806
Pontos : 9049

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