Efeito hover - menu de navegação

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

Resolvido Efeito hover - menu de navegação

Mensagem por Kvothe em 12/01/13, 03:36 pm

Qual é minha questão:
Olá pessoal,

Gostaria de saber se é possível ativer um efeito hover no menu de navegação.

Obrigado!

Endereço do meu fórum:
http://landofhaeron.forumbrasil.net

Versão do fórum:
PHPBB2


Última edição por Kvothe em 23/01/13, 10:32 pm, editado 1 vez(es)
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Mafioso em 12/01/13, 04:47 pm

avatar

Mafioso
Usuário destaque

Masculino
Inscrito dia : 13/11/2012
Mensagens : 707
Pontos Ativos : 903

Ver perfil do usuário http://www.brasilplaycity.com.br/forum

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 12/01/13, 05:08 pm

Não é bem essa questão de opacidade... Tenho 2 imagens para cada botão do menu, uma 'off' e outra que ao passar o mouse sobre o botao, aparecera ela...
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 12/01/13, 08:58 pm

UP
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por seender em 12/01/13, 10:53 pm

Olá!

Sim, porém, terá de fazer parte por parte, veja:
Código:
#i_icon_mini_index:hover{
background-image:url(Endereço-da-imagem-em-modo-hover) !important;
background-repeat: no-repeat !important;
}
Este é o código somente para o botão Início, para todos será assim:
Código:
[url=http://ajuda.forumeiros.com/]#i_icon_mini_index[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_portal[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_faq[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_search[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_members[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_groups[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_profile[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_message[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_logout[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_register[/url]:hover, [url=http://ajuda.forumeiros.com/]#i_icon_mini_login[/url]:hover{
background-image:url(Endereço-da-imagem-em-modo-hover) !important;
background-repeat: no-repeat !important;
}
Caso queira para cada menu terá de ir alterando a parte da classe em vermelho para o nome do menu em inglês:
Quando terminar de editar todo o código, cole-o em:
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS

Melhores cumprimentos,
seender
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 12/01/13, 11:41 pm

Obrigdo, irei testar. Se der certo clicarei em Resolvido.

Até
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 13/01/13, 04:03 pm

Não está dando certo.. Acho que estou fazendo algo errado, poderia explicar novamente?

Obrigado Muito feliz
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por seender em 13/01/13, 06:18 pm

Olá!

Qual código está utilizando? (o código acima ficou errado, o segundo código).

Até mais!
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 13/01/13, 06:44 pm

Estou usando o segundo, mas não está funcionando...
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Sennior em 13/01/13, 07:27 pm

Saudações!

Amigo, peço por favor, não faça Flooder, tudo bem? Utilize este CSS:

.mainmenu:hover {
Propriedades
}

Em propriedades, altere para o que vai acontecer quando colocado o mouse em cima.

Até mais!
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 13/01/13, 07:43 pm

Tudo bem, me desculpe.

Não entendi o que devo fazer, o que coloco em 'Propriedades' ?

Obrigado,
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 14/01/13, 01:30 pm

UP
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 14/01/13, 10:51 pm

UP
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 15/01/13, 12:04 pm

UP Muito feliz
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 16/01/13, 04:47 pm

UP
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 17/01/13, 01:03 pm

up
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 18/01/13, 12:28 pm

UP
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 20/01/13, 12:45 am

up
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 21/01/13, 05:55 pm

UP Muito feliz
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por seender em 21/01/13, 05:58 pm

Olá!

Amigo, quando pedi para falar qual código estava usando pedi para que o postasse aqui dentro da tag code para que eu o analise.

Até mais!
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 22/01/13, 05:32 pm

Não estava usando nenhum código, eu usei tentei os que me passou, mas não houve resultado..

Até!
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Efeito hover - menu de navegação

Mensagem por seender em 23/01/13, 04:28 am

Olá!

Agora que fui ver que os códigos da mensagem anterior foram postados com bug, siga esta mensagem:
Olá!

Sim, porém, terá de fazer parte por parte, veja:
Código:
#i_icon_mini_index:hover{
background-image:url(Endereço-da-imagem-em-modo-hover) !important;
background-repeat: no-repeat !important;
}
Este é o código somente para o botão Início, para todos será assim:
Código:
#i_icon_mini_index:hover,
 #i_icon_mini_portal:hover, #i_icon_mini_faq:hover,
#i_icon_mini_search:hover, #i_icon_mini_members:hover,
#i_icon_mini_groups:hover, #i_icon_mini_profile:hover,
#i_icon_mini_message:hover, #i_icon_mini_logout:hover,
#i_icon_mini_register:hover, #i_icon_mini_login:hover{
background-image:url(Endereço-da-imagem-em-modo-hover) !important;
background-repeat: no-repeat !important;
}
Caso queira para cada menu terá de ir alterando a parte da classe em vermelho para o nome do menu em inglês:
#i_icon_mini_index:hover
Quando terminar de editar todo o código, cole-o em:
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS

Melhores cumprimentos,
seender

Até mais!
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Efeito hover - menu de navegação

Mensagem por Kvothe em 23/01/13, 10:32 pm

Problema resolvido, até mais e obrigado Muito feliz
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

Ver perfil do usuário http://landofhaeron.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