Mudar botões do menu ao passar o mouse

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

Resolvido Mudar botões do menu ao passar o mouse

Mensagem por driver25 em 23/03/13, 09:10 pm

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, 11:02 pm, editado 2 vez(es)
avatar

driver25
Nível 4

Masculino
Inscrito dia : 18/03/2013
Mensagens : 31
Pontos Ativos : 37

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por Sennior em 23/03/13, 09:13 pm

Saudações!

Troque por este:

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

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: Mudar botões do menu ao passar o mouse

Mensagem por driver25 em 24/03/13, 01:14 am

Não funciona =/
avatar

driver25
Nível 4

Masculino
Inscrito dia : 18/03/2013
Mensagens : 31
Pontos Ativos : 37

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por Gaaratsu em 24/03/13, 01:20 am

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


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 em 24/03/13, 02:12 am

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 =/
avatar

driver25
Nível 4

Masculino
Inscrito dia : 18/03/2013
Mensagens : 31
Pontos Ativos : 37

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por Gaaratsu em 24/03/13, 02:17 am

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
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 em 24/03/13, 10:31 am

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

driver25
Nível 4

Masculino
Inscrito dia : 18/03/2013
Mensagens : 31
Pontos Ativos : 37

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por Gaaratsu em 24/03/13, 11:56 am

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


GaaratsuAjudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 em 24/03/13, 01:27 pm

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

Ai está =D
avatar

driver25
Nível 4

Masculino
Inscrito dia : 18/03/2013
Mensagens : 31
Pontos Ativos : 37

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por -luiz,, em 24/03/13, 09:19 pm

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 http://illiweb.com/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.
avatar

-luiz,,
Nível 7

Masculino
Inscrito dia : 05/07/2010
Mensagens : 88
Pontos Ativos : 101

Ver perfil do usuário http://clickhabbo.6te.net/

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 em 24/03/13, 09:54 pm

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

driver25
Nível 4

Masculino
Inscrito dia : 18/03/2013
Mensagens : 31
Pontos Ativos : 37

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

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por -luiz,, em 24/03/13, 10:19 pm

CSS:
a.mainmenu[href="/"] img{
background-image: url(http://i75.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="http://i75.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?
avatar

-luiz,,
Nível 7

Masculino
Inscrito dia : 05/07/2010
Mensagens : 88
Pontos Ativos : 101

Ver perfil do usuário http://clickhabbo.6te.net/

Resolvido Re: Mudar botões do menu ao passar o mouse

Mensagem por driver25 em 24/03/13, 11:01 pm

Perfeito Muito feliz
Muito obrigado Feliz
avatar

driver25
Nível 4

Masculino
Inscrito dia : 18/03/2013
Mensagens : 31
Pontos Ativos : 37

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