Efeito hover no menu

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

Resolvido Efeito hover no menu

Mensagem por nejibyakugan em 08/06/14, 08:36 pm

  • Descrição:
Eu queria saber como faço para colocar em meu fórum um efeito semelhante ao existente no meu deste fórum, quando passamos o mouse por cima, o botão escurece, eu queria saber como colocar este efeito em meu fórum.

  • Informações:
Fórum:http://pokemonmq.forumeiros.com/Versão:PUNBB
Tipo:Pedido de códigoTags:Efeito,hover



Última edição por nejibyakugan em 22/06/14, 10:55 am, editado 1 vez(es)
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Shek em 08/06/14, 09:19 pm

Boa noite!

Você poderia me indicar o local exato para qual deseja aplicar o efeito hover? Seria os ícones das mensagens?

Até mais!


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17160
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Efeito hover no menu

Mensagem por nejibyakugan em 08/06/14, 09:35 pm

No meu menu.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Sennior em 09/06/14, 12:13 am

Saudações,

Aceda à sua Folha de Estilo CSS:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS
Código:
Código:
a.mainmenu img  {filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}a.mainmenu img:hover {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}

Coloque no inicio de teu CSS.

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 no menu

Mensagem por nejibyakugan em 09/06/14, 08:30 am

O código que você me enviou faz a imagem ficar com uma cor fraca, e quando o mouse passa por cima ele fica com a cor original, o código que eu quero é para as imagens ficarem com cor normal, e quando passar o mouse por cima, ficar escura.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Lima 3005 em 09/06/14, 08:56 am

Código:
a.mainmenu img:hover  {filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}a.mainmenu img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}

Assim?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Efeito hover no menu

Mensagem por nejibyakugan em 09/06/14, 10:21 am

O código que me enviou faz o reverso do que o primeiro código, é por esse caminho mesmo, mas a imagem não está escurecendo, e sim ficando com uma cor mais fraca.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Sennior em 09/06/14, 12:24 pm

Saudações,

Altere seu código pelo abaixo:
Código:
a.mainmenu img  {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}a.mainmenu img:hover {filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}

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 no menu

Mensagem por nejibyakugan em 09/06/14, 12:53 pm

Tem o mesmo efeito do amigo acima, a imagem fica mais clara, eu quero que fique mais escura(igual o do menu do FDF)
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Sennior em 09/06/14, 12:59 pm

Saudações,

Mas que para isso ocorra, o seu menu teria que ser por códigos CSS e não por imagens.
Tente este código:

Código:
.mainmenu img:hover {
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 1.7;
}
.mainmenu img {
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.7;
}

Veja se gosta desta maneira, pois é a unica maneira viável de se fazer já que seu menu é por imagens.

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 no menu

Mensagem por nejibyakugan em 09/06/14, 02:57 pm

Teve o primeiro efeito, da imagem ficar com cor mais fraca, e voltar a imagem original quando passa o mouse por cima, eu queria que a imagem fosse a original e quando passar o mouse por cima, ela fiquei mais escura(nem que eu tenha que refazer botão a botão num tom escuro).
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Sennior em 09/06/14, 02:59 pm

Olá amigo,

Então, poderia fazer em um tom mais escuro? Assim eu poderia fazer do jeito que deseja. Muito feliz

Abraços.
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 no menu

Mensagem por nejibyakugan em 09/06/14, 03:50 pm

O menu do meu fórum mudará hoje, então, até amanhã eu envio as imagens, para que seja feito o código, então, peço que aguarde enquanto isso, ok?
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Sennior em 09/06/14, 03:52 pm

Olá,

Tudo bem amigo.  Piscada 

Abraços.
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 no menu

Mensagem por nejibyakugan em 12/06/14, 02:57 pm

Pronto, refiz todos os botões, menos o de NEW MPs(não sei escurecer GIFs '-' )

Aqui estão as imagens mais escuras:

Spoiler:
 
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Sennior em 14/06/14, 04:18 am

Saudações! Muito feliz

Aceda à tua "Folha de estilo CSS":
Painel de Controle  Seta  Visualização  Seta  Imagens e cores  Seta  Cores  Seta  Folha de estilo CSS

Código:
Código:
a.mainmenu:hover {filter: alpha(opacity=40);-moz-opacity: 0.4;opacity: 3.7;}a.mainmenu {filter: alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.5;}

Melhores cumprimentos,
Sennior. De bem com a vida
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 no menu

Mensagem por nejibyakugan em 14/06/14, 11:18 am

Mesmo efeito, fica uma fumaça branca na frente da imagem e quando passamos por cima a fumaça some, sabe o menu do FDF? Quando a gente passa o mouse por cima, a cor fica mais escura, é isso que eu quero.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Dr. em 14/06/14, 10:13 pm

Saudações! Bem, o senhor deseja desta forma:

Código:
a.mainmenu:hover{
-htm-transform: all;
-htm-transition: 1s;
-moz-transform: all;
-moz-transition: 1s;
-o-transform: all;
-o-transition: 1s;
-webkit-filter: blur(0px);
-webkit-transform: all;
-webkit-transition: 1s;
background-color: XXX;
border-bottom: 3px solid XXX;
color: #fff;
filter: url(#blur-effect-1);
padding: 8px;
transform: all;
transition: 1s;
}
Vulgo que XXX representa a cor que o senhor deseja?

Atenciosamente.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Dr. — Moderadeiro Global
avatar

Dr.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 04/02/2013
Mensagens : 2879
Pontos Ativos : 3247

Ver perfil do usuário http://www.casadosnerds.com https://www.facebook.com/MatheusAndreazzi https://twitter.com/nevesandreazzi

Resolvido Re: Efeito hover no menu

Mensagem por nejibyakugan em 14/06/14, 10:23 pm

Sem resultados.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Dr. em 14/06/14, 10:25 pm

O senhor alterou o XXX pela cor hexadecimal desejada? (#000000 e #FFFFFF, por exemplo.)

Atenciosamente.
avatar

Dr.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 04/02/2013
Mensagens : 2879
Pontos Ativos : 3247

Ver perfil do usuário http://www.casadosnerds.com https://www.facebook.com/MatheusAndreazzi https://twitter.com/nevesandreazzi

Resolvido Re: Efeito hover no menu

Mensagem por nejibyakugan em 15/06/14, 09:48 am

Sim, alterei, mas não há resultados.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

Resolvido Re: Efeito hover no menu

Mensagem por Alex Habilidade em 21/06/14, 09:13 pm

Olá,

O senhor forneceu as imagens que será o efeito 'Hover', peço que o senhor coloque as imagens normais em seu fórum, para que possamos fazer os teste para fazer o efeito hover desejado.

Quando colocar avise ok?
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Efeito hover no menu

Mensagem por nejibyakugan em 22/06/14, 10:27 am

Sim, alterei.
avatar

nejibyakugan
Usuário destaque

Masculino
Inscrito dia : 08/08/2012
Mensagens : 541
Pontos Ativos : 898

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

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