Como fazer efeito hover no menú

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

Resolvido Como fazer efeito hover no menú

Mensagem por dsc em 28/11/10, 01:24 am

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.
avatar

dsc
Nível 4

Masculino
Inscrito dia : 14/11/2010
Mensagens : 30
Pontos Ativos : 55

Ver perfil do usuário http://smhb.forumeiros.com

Resolvido Re: Como fazer efeito hover no menú

Mensagem por Gicleyson em 28/11/10, 01:30 am

Não Sei Se Realmente É Possivel.
Acredito Que Não,
Mais Vamos Esperar Alguem Que Saba Mais...

Grande Abraço,
Gicleyson.

Gicleyson
Nível 8

Masculino
Inscrito dia : 02/06/2010
Mensagens : 100
Pontos Ativos : 146

Ver perfil do usuário http://photoarts.forumeiro.com/forum

Resolvido Re: Como fazer efeito hover no menú

Mensagem por dsc em 28/11/10, 02:06 am

Encontrei este tutorial.

É possível fazer isto com CSS?
avatar

dsc
Nível 4

Masculino
Inscrito dia : 14/11/2010
Mensagens : 30
Pontos Ativos : 55

Ver perfil do usuário http://smhb.forumeiros.com

Resolvido Re: Como fazer efeito hover no menú

Mensagem por Mikáá em 28/11/10, 05:56 am

Olá!

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 Muito feliz
avatar

Mikáá
Hiperativo

Masculino
Inscrito dia : 13/02/2010
Mensagens : 3155
Pontos Ativos : 4009

Ver perfil do usuário https://www.facebook.com/amo.e.odeio

Resolvido Re: Como fazer efeito hover no menú

Mensagem por Gabe em 30/11/10, 08:47 pm

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.
avatar

Gabe
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/01/2010
Mensagens : 5770
Pontos Ativos : 7546

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum