ArtigosComo fazer efeito hover no menú
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Como fazer efeito hover no menú
por dsc 28.11.10 3:24
O título pode parecer estranho, mas eu explico.
No meu fórum, no cabeçalho, eu uso o efeito hover nos botões, como vocês podem ver aqui. Mas notem que esse efeito simplesmente escurece a imagem e a encolhe um pouco. Mas o que eu quero é o seguinte: sempre que o cursor do mouse for colocado em cima do botão, a imagem deste muda, ao invés de escurecer.
Exemplo:
Ícone normal:
Ícone com o cursor do mouse em cima:
↑ É possível fazer isso? Se sim, como?
Desde já agradeço pela atenção.
No meu fórum, no cabeçalho, eu uso o efeito hover nos botões, como vocês podem ver aqui. Mas notem que esse efeito simplesmente escurece a imagem e a encolhe um pouco. Mas o que eu quero é o seguinte: sempre que o cursor do mouse for colocado em cima do botão, a imagem deste muda, ao invés de escurecer.
Exemplo:
Ícone normal:
Ícone com o cursor do mouse em cima:
↑ É possível fazer isso? Se sim, como?
Desde já agradeço pela atenção.
dsc- *
- Membro desde : 14/11/2010
Mensagens : 30
Pontos : 55 -
Re: Como fazer efeito hover no menú
por Gicleyson 28.11.10 3:30
Não Sei Se Realmente É Possivel.
Acredito Que Não,
Mais Vamos Esperar Alguem Que Saba Mais...
Grande Abraço,
Gicleyson.
Acredito Que Não,
Mais Vamos Esperar Alguem Que Saba Mais...
Grande Abraço,
Gicleyson.
Gicleyson- ***
- Membro desde : 02/06/2010
Mensagens : 100
Pontos : 146 -
dsc- *
- Membro desde : 14/11/2010
Mensagens : 30
Pontos : 55 -
Re: Como fazer efeito hover no menú
por Mikáá 28.11.10 7:56
Olá!
Aqui tem:
Até mais
Aqui tem:
- Clique aqui paa ver os códigos:
- calendario:
- Código:
#i_icon_mini_calendar {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_calendar:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Sair:- Código:
#i_icon_mini_logout {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_logout:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Novas mensagens:- Código:
#i_icon_mini_new_message {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_new_message:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
FAQ:- Código:
#i_icon_mini_faq {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/faq10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_faq:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Buscar:- Código:
#i_icon_mini_search {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/buscar10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_search:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
MP:- Código:
#i_icon_mini_message {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/mensag12.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_message:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Editar profile:- Código:
#i_icon_mini_profile {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/bolinh10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_profile:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
login:- Código:
#i_icon_mini_login {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_login:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
registar:- Código:
#i_icon_mini_register {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/regist10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_register:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
grupos:- Código:
#i_icon_mini_groups {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/grupos10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
#i_icon_mini_groups:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Até mais
Mikáá- Hiper Membro
- Membro desde : 13/02/2010
Mensagens : 3158
Pontos : 4014 -
Re: Como fazer efeito hover no menú
por Gabe 30.11.10 22:47
Olá!
Por favor, confirme se sua dúvida está resolvida ou ainda falta algo a ser dito. Pedimos encarecidamente que dê atenção ao seu tópico, informando-nos quando a questão estiver resolvida e colocando o ícone
. Terá mais três dias para postar uma mensagem, caso contrário seu tópico será movido para o devido local.
Até mais.
Por favor, confirme se sua dúvida está resolvida ou ainda falta algo a ser dito. Pedimos encarecidamente que dê atenção ao seu tópico, informando-nos quando a questão estiver resolvida e colocando o ícone
. Terá mais três dias para postar uma mensagem, caso contrário seu tópico será movido para o devido local.Até mais.
Gabe- Membro Entusiasta
- Membro desde : 10/01/2010
Mensagens : 5769
Pontos : 7547 -
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos