Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
96 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 94 Visitantes :: 2 Motores de busca

lucasmcard, YuriGama

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Botões com efeito hover

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

Resolvido Botões com efeito hover

Mensagem por ZombieW em Sex 24 Abr 2015 - 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":



Quero que ela mude para essa imagem:



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

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



É 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 Qua 13 Maio 2015 - 3:49, editado 1 vez(es)

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por Sennior em Sex 24 Abr 2015 - 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


Admineiros Jamais forneça seus dados pessoais, tais como e-mail de fundação ou senhas pelo fórum!
Admineiros  Antes de criar um novo tópico faça uma pesquisa rápida e olhe a lista de tutoriais prontos.
Admineiros Perdeu a senha de administração? Veja o que fazer.
Admineiros Ferramentas do Administrador.

"Você será lembrado pelo que faz, e não pela cor que tens".

Sennior
Admineiro
Admineiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16227
Pontos Ativos : 22714

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Sab 25 Abr 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por Sennior em Sab 25 Abr 2015 - 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.


Admineiros Jamais forneça seus dados pessoais, tais como e-mail de fundação ou senhas pelo fórum!
Admineiros  Antes de criar um novo tópico faça uma pesquisa rápida e olhe a lista de tutoriais prontos.
Admineiros Perdeu a senha de administração? Veja o que fazer.
Admineiros Ferramentas do Administrador.

"Você será lembrado pelo que faz, e não pela cor que tens".

Sennior
Admineiro
Admineiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16227
Pontos Ativos : 22714

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Sab 25 Abr 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Qua 29 Abr 2015 - 15:46

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

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por Sennior em Qua 29 Abr 2015 - 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


Admineiros Jamais forneça seus dados pessoais, tais como e-mail de fundação ou senhas pelo fórum!
Admineiros  Antes de criar um novo tópico faça uma pesquisa rápida e olhe a lista de tutoriais prontos.
Admineiros Perdeu a senha de administração? Veja o que fazer.
Admineiros Ferramentas do Administrador.

"Você será lembrado pelo que faz, e não pela cor que tens".

Sennior
Admineiro
Admineiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16227
Pontos Ativos : 22714

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Qui 30 Abr 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por Sennior em Sex 1 Maio 2015 - 21:00

Saudações,

E aí ZombieW?
Conseguiu meu caro amigo?

Até mais.
Sennior


Admineiros Jamais forneça seus dados pessoais, tais como e-mail de fundação ou senhas pelo fórum!
Admineiros  Antes de criar um novo tópico faça uma pesquisa rápida e olhe a lista de tutoriais prontos.
Admineiros Perdeu a senha de administração? Veja o que fazer.
Admineiros Ferramentas do Administrador.

"Você será lembrado pelo que faz, e não pela cor que tens".

Sennior
Admineiro
Admineiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16227
Pontos Ativos : 22714

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Qua 6 Maio 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Qui 7 Maio 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por Sennior em Qui 7 Maio 2015 - 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


Admineiros Jamais forneça seus dados pessoais, tais como e-mail de fundação ou senhas pelo fórum!
Admineiros  Antes de criar um novo tópico faça uma pesquisa rápida e olhe a lista de tutoriais prontos.
Admineiros Perdeu a senha de administração? Veja o que fazer.
Admineiros Ferramentas do Administrador.

"Você será lembrado pelo que faz, e não pela cor que tens".

Sennior
Admineiro
Admineiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16227
Pontos Ativos : 22714

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Qui 7 Maio 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Botões com efeito hover

Mensagem por MateusA em Qui 7 Maio 2015 - 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
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 5520

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

Resolvido Re: Botões com efeito hover

Mensagem por Shaman em Seg 11 Maio 2015 - 5:42

A pedido do autor, tópico reaberto.


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

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 3491

http://www.nexplorer.tk https://www.facebook.com/https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Seg 11 Maio 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Qua 13 Maio 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por Shaman em Qua 13 Maio 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 3491

http://www.nexplorer.tk https://www.facebook.com/https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Botões com efeito hover

Mensagem por ZombieW em Qua 13 Maio 2015 - 3:48

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

Os testes deram certo! '-'

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4051

http://www.perfectteam.org

Resolvido Re: Botões com efeito hover

Mensagem por Shaman em Qua 13 Maio 2015 - 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
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 3491

http://www.nexplorer.tk https://www.facebook.com/https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5