Mudar botões do menu ao passar o mouse

4 participantes

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

Tópico resolvido Mudar botões do menu ao passar o mouse

Mensagem por driver25 23.03.13 21:10

Qual é minha questão:
Poderia me informar como fazer um efeito de quando eu passar o mouse sobre os botões do menu ele ir mudando de imagem? pra eu poder fazer um efeito de mudança de cor neles?

Ja tentei usar este código mais não deu certo:

#i_icon_mini_message:hover {
background-image: url(Endereço_da_sua_imagem);
}


Endereço do meu fórum:
http://testesalheios.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por driver25 em 24.03.13 23:02, editado 2 vez(es)
driver25

driver25
*

Membro desde : 18/03/2013
Mensagens : 31
Pontos : 37

http://testesalheios.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por Sennior 23.03.13 21:13

Saudações!

Troque por este:

Código:
.mainmenu:hover {
background-image: url(Endereço_da_sua_imagem) !important;
}

Até mais!
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 24.03.13 1:14

Não funciona =/
driver25

driver25
*

Membro desde : 18/03/2013
Mensagens : 31
Pontos : 37

http://testesalheios.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por Konai 24.03.13 1:20

Olá querido,

Substitua o código passado pelo Mikéé, por este:
ul.linklist li a img {
background:url(IMAGEM);
cursor:allowed;
}
ul.linklist a img:hover {
background:url(IMAGEM_HOVER);
cursor:allowed;
}

Onde está em negrito é a url da imagem. A IMAGEM seria o botão normal e a IMAGEM_HOVER seria o botão que ao passar o mouse apareceria.

Cordialmente,
Dr.House
Muito feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 24.03.13 2:12

Também já tinha usado este código tentei novamente e não deu nada, a imagem do menu continua estática quando passo o mouse =/
driver25

driver25
*

Membro desde : 18/03/2013
Mensagens : 31
Pontos : 37

http://testesalheios.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por Konai 24.03.13 2:17

Olá!

Veja as classes CSS ligadas à cada imagem do menu:
#i_icon_mini_index { Corresponde à imagem início/Fórum.
#i_icon_mini_portal { Corresponde à imagem portal.
#i_icon_mini_calendar { Corresponde à imagem calendário.
#i_icon_mini_faq { Corresponde à imagem Faq/Perguntas e respostas criadas por si no painel de controle.
#i_icon_mini_search { Corresponde à imagem buscar.
#i_icon_mini_index { Corresponde à imagem início/Fórum.
#i_icon_mini_members { Corresponde à imagem de membros do fórum.
#i_icon_mini_groups { Corresponde à imagem grupos.
#i_icon_mini_profile { Corresponde à imagem perfil.
#i_icon_mini_message { Corresponde à imagem do link do menu MP.
ul.navlinks span.new-message { Corresponde à imagem do link do menu Nova MP.
#i_icon_mini_logout { Corresponde à imagem do link do menu Sair.
i_icon_mini_login { Corresponde à imagem do link do menu Login/Entrar.
i_icon_mini_register { Corresponde à imagem do link do menu Registrar/Cadastrar.
Agora para colocar uma imagem para exibir quando passar o mouse em cima do link veja:

#i_icon_mini_message:hover {
background-image: url(Endereço_da_sua_imagem);
}
Isso acima é um exemplo, deverá ser modificado a parte "#i_icon_mini_message", dependendo da escolha das classes.

O código depois de produzido, deverá ser adicionado em:
Painel de controle :seta2: Visualização :seta2: Imagens e cores :seta2: Cores :seta2: Aba 'Folha estilo CSS'

Cordialmente,
Dr.House
Muito feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 24.03.13 10:31

Cara eu já catei tudo que é código postado aqui no fórum e nenhum está funcionando, este tbm foi um desses.

O único que funcionou parcialmente foi um javascript mais estava bugado pois ele mudava a imagem ao passar o mouse mais não voltava pra antiga quando tirava o mouse de cima.
driver25

driver25
*

Membro desde : 18/03/2013
Mensagens : 31
Pontos : 37

http://testesalheios.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por Konai 24.03.13 11:56

Olá senhor Driver,

Estranho.. Louco o código que lhe passei é funcional em meu fórum, testei antes de posta-lo.

Bom.. já que não funciona poderia me passar o código Javascript? Tentarei concerta-lo para o senhor.

Cordialmente,
Dr.House
Muito feliz
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 24.03.13 13:27

Código:
$(document).ready(function(){$('a.mainmenu img[src="LINK1"]').mouseover(function(){$(this).attr('src','LINK2')})});

Ai está =D
driver25

driver25
*

Membro desde : 18/03/2013
Mensagens : 31
Pontos : 37

http://testesalheios.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por -luiz,, 24.03.13 21:19

Olá um solução em css:

/*Abaixo href="/" é referente ao botão forum (inicio)*/
a.mainmenu[href="/"]{
background-image: url(Endereço_da_sua_imagem);
}
a.mainmenu[href="/"]:hover{
background-image: url(Endereço_da_sua_imagem_hover);
}

/*Abaixo href="/calendar" é referente ao botão calendario*/
a.mainmenu[href="/calendar"]{
background-image: url(Endereço_da_sua_imagem);
}
a.mainmenu[href="/calendar"]:hover{
/*Criado por -luiz,,*/
background-image: url(Endereço_da_sua_imagem_hover);
}


E assim você faz com todos os links, "IMPORTANTE" remova todos as imagens do menu, deixando transparente.
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Gestão das Imagens
Todos os campos referentes ao Menu Seta https://2img.net/i/fa/empty.gif
Solução em JS:


img1="img que esta no menu";//Img atual //
img2="Img que ficará no menu";//Img hover//
atu_img = function(){$(this).attr('src',img1);}nova_img = function(){//Criado por -luiz,,//[/font]$(this).attr('src',img2)};$(document).ready(function(){$('a.mainmenu img[src="'+img1+'"]').hover(nova_img,atu_img)});

Acho essa mais "Lenta".

Recomando usar a CSS.
-luiz,,

-luiz,,
**

Membro desde : 05/07/2010
Mensagens : 88
Pontos : 101

http://clickhabbo.6te.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 24.03.13 21:54

Fiz justamente como está ai e não está funcionando.

Olha ai:
Código:
/*Abaixo href="/" é referente ao botão forum (inicio)*/
a.mainmenu[href="/"]{
background-image: url(http://i75.servimg.com/u/f75/16/15/60/55/forum10.jpg);
}
a.mainmenu[href="/"]:hover{
background-image: url(http://hitskin.com/themes/14/74/29/i_icon_mini_members.gif);
}

O java tbm não deu.
driver25

driver25
*

Membro desde : 18/03/2013
Mensagens : 31
Pontos : 37

http://testesalheios.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por -luiz,, 24.03.13 22:19

CSS:
a.mainmenu[href="/"] img{
background-image: url(https://i.servimg.com/u/f75/16/15/60/55/forum10.jpg);
width: 90px!important;
height: 37px!important;
}
a.mainmenu[href="/"]:hover img{
background-image: url(http://hitskin.com/themes/14/74/29/i_icon_mini_members.gif);
}

JS:
img2="https://i.servimg.com/u/f75/16/15/60/55/forum10.jpg";//Img atual //
img1="http://hitskin.com/themes/14/74/29/i_icon_mini_members.gif";//Img hover//
atu_img = function(){$(this).attr('src',img1);};nova_img = function(){$(this).attr('src',img2)};$(document).ready(function(){$('a.mainmenu img[src="'+img1+'"]').hover(nova_img,atu_img)});

Resulta?
-luiz,,

-luiz,,
**

Membro desde : 05/07/2010
Mensagens : 88
Pontos : 101

http://clickhabbo.6te.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 24.03.13 23:01

Perfeito Muito feliz
Muito obrigado Feliz
driver25

driver25
*

Membro desde : 18/03/2013
Mensagens : 31
Pontos : 37

http://testesalheios.forumeiros.com/

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