Botões com efeito hover

4 participantes

Ir para baixo

Tópico resolvido Botões com efeito hover

Mensagem por ZombieW 24.04.15 13:10

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://www.tutorialdoca.com

Descrição do problema

Bom dia,

Dei uma caçada na internet/fórum, mas não achei o que eu queria.

Vou mudar um pouco o layout do fórum e gostaria de fazer botões com efeito "hover".

Inseri essa imagem aqui no lugar do "Novo Tópico":

Botões com efeito hover New_to10

Quero que ela mude para essa imagem:

Botões com efeito hover New_to11

Somente quando eu passar o mouse por cima do botão.

Quando eu tirar o mouse, a imagem deve voltar para esta:

Botões com efeito hover New_to10

É possível de ser feito?

Pretendo fazer isso com todos ou a maioria dos botões "padrões" do fórum.


Última edição por ZombieW em 13.05.15 3:49, editado 1 vez(es)
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por Sennior 24.04.15 20:42

Saudações,

Adicione o código abaixo no inicio do CSS de teu fórum:
CPainel ->> Visualização ->> Gestão de imagens ->> Cores ->> Folha de Estilo CSS
Adicione o código abaixo:
Código:
.i_post:hover {background: url(http://i19.servimg.com/u/f19/17/53/75/18/new_to11.png)!important;z-index: 999;}

Salve e Visualize seu fórum. Piscada
Melhores cumprimentos,
Sennior De bem com a vida
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: Botões com efeito hover

Mensagem por ZombieW 25.04.15 3:49

Sennior, (quase te chamei de Sender, constume acho), esse código no caso é para esse botão certo?

Você poderia me passar a lista de códigos para os botões do fórum? Vou fazer isso com todos.

Índice
Galeria
Portal
FAQ
Buscar
Membros
Grupos
Editar o seu perfil
Mensagens Privadas
Nova mensagem privada
Registrar-se
Login
Sair
Novo Tópico
Responder ao Tópico
Novas Mensagens [Bloqueadas]
Responder com citação
Editar o tópico
E "Painel de Controle", que é um customizado (/admin/index.forum?part=admin&sid=8af4651b7b395167ceef)
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por Sennior 25.04.15 4:04

Saudações,

O senhor deseja a Classe?
E com a função do :hover nos códigos para só colocar o link da imagem?

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: Botões com efeito hover

Mensagem por ZombieW 25.04.15 21:12

Sennior escreveu:Saudações,

O senhor deseja a Classe?
E com a função do :hover nos códigos para só colocar o link da imagem?

Até mais.

Sei que está nas regras de vocês, mas não me chame de "sr.", não gosto, parece que sou mais velho do que já sou.

@Topic

Sim, gostaria das classes desses botões, como falei, pretendo mudar todos os botões do fórum.
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por ZombieW 29.04.15 15:46

Vou dar um "up"zinho básico para não perder este tópico.
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por Sennior 29.04.15 23:37

Saudações,

Desculpe-me a falta de compromisso com teu tópico amigo.
Bem, essas são as classes em modo hover que deve alterar:

Código:
img#i_icon_mini_index:hover {
   /* Propriedades: Hover Menu/Fórum */
}
img#i_icon_mini_faq {
   /* Propriedades: Hover Menu/FAQ */
}
img#i_icon_mini_search:hover {
   /* Propriedades: Hover Menu/Procurar */
}
img#i_icon_mini_members:hover {
   /* Propriedades: Hover Menu/Membros */
}
img#i_icon_mini_groups:hover {
   /* Propriedades: Hover Menu/Grupos */
}
img#i_icon_mini_register:hover {
   /* Propriedades: Hover Menu/registrar */
}
img#i_icon_mini_login:hover {
   /* Propriedades: Hover Menu/Login */
}
img.i_post:hover {
   /* Propriedades: Hover Novo tópico */
}
img.i_reply:hover {
   /* Propriedades: Hover Responder ao tópico */
}
img.i_icon_quote:hover {
   /* Propriedades: Hover Responder com Citação */
}
img.i_icon_edit:hover {
   /* Propriedades: Hover Editar tópico */
}

Até mais.
Sennior
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: Botões com efeito hover

Mensagem por ZombieW 30.04.15 19:06

Sennior escreveu:Saudações,

Desculpe-me a falta de compromisso com teu tópico amigo.
Bem, essas são as classes em modo hover que deve alterar:

Até mais.
Sennior

Sem problemas, irei realizar um teste amanhã e depois lhe respondo!
Obrigado.
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por Sennior 01.05.15 21:00

Saudações,

E aí ZombieW?
Conseguiu meu caro amigo?

Até mais.
Sennior
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: Botões com efeito hover

Mensagem por ZombieW 06.05.15 19:26

Sennior escreveu:Saudações,

E aí ZombieW?
Conseguiu meu caro amigo?

Até mais.
Sennior

Peço desculpas pela demora Sennior, estive um pouco ocupado, se tudo der certo, hoje eu testo e já lhe retorno.
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por ZombieW 07.05.15 7:51

Sennior,

Fiz o teste somente com 1 botão, o inicial de "New Topic".

Inseri o novo botão e coloquei este código no CSS:

Código:
.i_post:hover {background: url(http://i19.servimg.com/u/f19/17/53/75/18/new_to11.png)!important;z-index: 999;}

Não funcionou. E portanto, não testei os demais comandos.
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por Sennior 07.05.15 11:36

Saudações,

Tente assim:
Código:
.i_post:hover img {background: url(http://i19.servimg.com/u/f19/17/53/75/18/new_to11.png)!important;z-index: 999;}

Abraços.
Sennior
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: Botões com efeito hover

Mensagem por ZombieW 07.05.15 13:41

Sennior escreveu:Saudações,

Tente assim:
Código:
.i_post:hover img {background: url(http://i19.servimg.com/u/f19/17/53/75/18/new_to11.png)!important;z-index: 999;}

Abraços.
Sennior

Nops.

Veja tópico que estou testando, ao passar o mouse no botão "New Topic" nada acontece.
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por MateusA 07.05.15 23:48

Olá @ZombieW!

Podemos fazer isso de uma forma mais prática, veja:
Crie um novo javascript, nos tópicos:
Código:
$(function(){
$('img[src="http://i19.servimg.com/u/f19/17/53/75/18/new_to10.png"]').mouseover(function(){$(this).attr('src', 'http://i19.servimg.com/u/f19/17/53/75/18/new_to11.png');  });  $('img[src="http://i19.servimg.com/u/f19/17/53/75/18/new_to10.png"]').mouseleave(function(){  $(this).attr('src', 'http://i19.servimg.com/u/f19/17/53/75/18/new_to10.png');  });
});

Isso fará as mudanças de hover no newtopic, deixe-me lhe explicar, como funciona:

Código:
$(function(){
$('img[src="IMGANTESDOHOVER]').mouseover(function(){$(this).attr('src', 'IMAGEMHOVER');  });  $('img[src="IMAGEMHOVER"]').mouseleave(function(){  $(this).attr('src', 'IMAGEMANTESDOHOVER');  });
});

Você pode duplicar, assim:
Código:
$(function(){
$('img[src="IMGANTESDOHOVER]').mouseover(function(){$(this).attr('src', 'IMAGEMHOVER');  });  $('img[src="IMAGEMHOVER"]').mouseleave(function(){  $(this).attr('src', 'IMAGEMANTESDOHOVER');  });

$('img[src="IMGANTESDOHOVER]').mouseover(function(){$(this).attr('src', 'IMAGEMHOVER');  });  $('img[src="IMAGEMHOVER"]').mouseleave(function(){  $(this).attr('src', 'IMAGEMANTESDOHOVER');  });
});

Atenciosamente,
MateusA.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por Shaman 11.05.15 5:42

A pedido do autor, tópico reaberto.


Tópico movido para 'Questões sobre JavaScript & jQuery'
Shaman
Shaman
Super Membro

Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448

http://brasilplayvicio.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por ZombieW 11.05.15 7:01

MateusA escreveu:Olá @ZombieW!

Podemos fazer isso de uma forma mais prática, veja:
Crie um novo javascript, nos tópicos:
Código:
$(function(){
$('img[src="http://i19.servimg.com/u/f19/17/53/75/18/new_to10.png"]').mouseover(function(){$(this).attr('src', 'http://i19.servimg.com/u/f19/17/53/75/18/new_to11.png');  });  $('img[src="http://i19.servimg.com/u/f19/17/53/75/18/new_to10.png"]').mouseleave(function(){  $(this).attr('src', 'http://i19.servimg.com/u/f19/17/53/75/18/new_to10.png');  });
});

Isso fará as mudanças de hover no newtopic, deixe-me lhe explicar, como funciona:

Código:
$(function(){
$('img[src="IMGANTESDOHOVER]').mouseover(function(){$(this).attr('src', 'IMAGEMHOVER');  });  $('img[src="IMAGEMHOVER"]').mouseleave(function(){  $(this).attr('src', 'IMAGEMANTESDOHOVER');  });
});

Você pode duplicar, assim:
Código:
$(function(){
$('img[src="IMGANTESDOHOVER]').mouseover(function(){$(this).attr('src', 'IMAGEMHOVER');  });  $('img[src="IMAGEMHOVER"]').mouseleave(function(){  $(this).attr('src', 'IMAGEMANTESDOHOVER');  });

$('img[src="IMGANTESDOHOVER]').mouseover(function(){$(this).attr('src', 'IMAGEMHOVER');  });  $('img[src="IMAGEMHOVER"]').mouseleave(function(){  $(this).attr('src', 'IMAGEMANTESDOHOVER');  });
});

Atenciosamente,
MateusA.

MateusA,

Fiz um teste com o código que você me passou e deu certo.

Mas ainda não irei fechar o tópico, quero tentar replicar ele na maioria (ou todos) dos botões.

Só não faço agora, porque minha internet está ruim.

Desde já, obrigado.
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por MateusA 11.05.15 11:24

Ok amigo. Quando acabar, é só se pronunciar e, caso ocorra algum bug, diga. Piscada
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por ZombieW 13.05.15 3:27

MateusA escreveu:Ok amigo. Quando acabar, é só se pronunciar e, caso ocorra algum bug, diga. Piscada

MateusA,

Esse JS funciona com qualquer coisa do fórum? Até por exemplo com o ícone do "quem está conectado"?
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por Shaman 13.05.15 3:34

ZombieW escreveu:
MateusA escreveu:Ok amigo. Quando acabar, é só se pronunciar e, caso ocorra algum bug, diga. Piscada

MateusA,

Esse JS funciona com qualquer coisa do fórum? Até por exemplo com o ícone do "quem está conectado"?

Mudando a classe no JavaScript provavelmente sim @ZombieW.

Abs.
Shaman
Shaman
Super Membro

Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448

http://brasilplayvicio.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por ZombieW 13.05.15 3:48

Então pode fechar, agradeço aos dois.

Os testes deram certo! '-'
ZombieW
ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: Botões com efeito hover

Mensagem por Shaman 13.05.15 4:32

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Shaman
Shaman
Super Membro

Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448

http://brasilplayvicio.com.br

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos