Botões em efeitos hover com CSS

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

Resolvido Botões em efeitos hover com CSS

Mensagem por Kvothe em 08/01/14, 07:20 pm

Qual é minha questão:
Olá pessoal,

Consegui um código, acho que aqui mesmo no fórum, que aplica um efeito de opacidade nos botões Citar, Editar, Excluir e IP. A questão é que gostaria dele aplicado em todos os botões (quando digo todos, me refiro àqueles que posso controlar no painel de controle - aba Botões).

Se for de ajuda, o código é o seguinte:

Código:
.post-options img:hover {
opacity: 0.7;
}


.posting img:hover {
opacity: 0.9;
}


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

Versão do fórum:
PHPBB2


Última edição por Kvothe em 18/01/14, 08:55 pm, editado 1 vez(es)
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Botões em efeitos hover com CSS

Mensagem por Alex Habilidade em 08/01/14, 08:33 pm

Olá,

Adicione em sua folha CSS:
Código:

.nav img:hover {
opacity: 0.7; 
}
.profile-icon img:hover {
opacity: 0.7; 
}

Cordiais Saudações;
Alex!Piscada
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: Botões em efeitos hover com CSS

Mensagem por Hancki em 09/01/14, 07:59 pm

Olá!

Use este CSS:
Código:
.mainmenu img:hover {
opacity : 0.7 !important;
}
Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Botões em efeitos hover com CSS

Mensagem por Kvothe em 10/01/14, 10:58 am

@Alex Habilidade escreveu:Olá,

Adicione em sua folha CSS:
Código:

.nav img:hover {
opacity: 0.7;  
}
.profile-icon img:hover {
opacity: 0.7;  
}

Cordiais Saudações;
Alex!Piscada

Olá Alex,

O seu código funcionou parcialmente, ele afetou os botões Novo Tópico, Responder, Enviar MP e Ver Perfil. Ainda faltam alguns, eu fiz uma montagem do painel de controle, onde são exibidos exatamente os botões que eu gostaria de ter o efeito hover (com o exceção do 'online', que me esqueci de tirar). A lista pode ser visualizada aqui.

Obrigado,
Kvothe


@Hancki escreveu:Olá!

Use este CSS:
Código:
.mainmenu img:hover {
opacity : 0.7 !important;
}
Hancki

Olá Hancki,

Seu código afetou o menu de navegação. Na verdade eu me referia a estes botões (com exceção apenas do 'online').

Obrigado,
Kvothe
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Botões em efeitos hover com CSS

Mensagem por Alex Habilidade em 10/01/14, 08:55 pm

Olá,

Pelo que observei falta somente colocar as opacidades em: Postar uma MP, Caixa de Entrada,
Mensagens Enviadas, Caixa de Envio, Arquivos;
Adicione em sua folha CSS:
Código:

IMG#i_msg_inbox:hover {
opacity: 0.7!important;  
}
IMG#i_msg_sentbox:hover{
opacity: 0.7!important;  
}
IMG#i_msg_outbox:hover{
opacity: 0.7!important;  
}
IMG#i_msg_savebox:hover {
opacity: 0.7!important;  
}
IMG#i_icon_pm:hover {
opacity: 0.7!important;  
}

Cordiais Saudações;
Alex!Piscada
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: Botões em efeitos hover com CSS

Mensagem por Kvothe em 12/01/14, 01:34 pm

Olá Alex,

Ainda faltam três: Homepage, twitter e facebook.

Até mais!
Kvothe
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Botões em efeitos hover com CSS

Mensagem por Alex Habilidade em 12/01/14, 02:06 pm

Olá,

Adicione em sua Folha CSS:
Código:

.field_uneditable img:hover {
opacity: 0.7!important; 
}
.gen ajax-profil_parent img:hover {
opacity: 0.7!important; 
}

Cordiais Saudações;
Alex!Piscada
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: Botões em efeitos hover com CSS

Mensagem por Kvothe em 12/01/14, 08:55 pm

Não resultou amigo..
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Botões em efeitos hover com CSS

Mensagem por Kvothe em 14/01/14, 12:24 am

UP
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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

Resolvido Re: Botões em efeitos hover com CSS

Mensagem por Alex Habilidade em 17/01/14, 12:51 pm

Olá,

Adicione em sua folha CSS:
Código:

.row1.messaging.gensmall img:hover {
opacity: 0.7!important;
}

Cordiais Saudações;
Alex!Piscada
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: Botões em efeitos hover com CSS

Mensagem por Kvothe em 17/01/14, 01:30 pm

Funcionou muito bem! Só há uns detalhes, mas creio que eu mesmo poderia arrumar. Gostaria de saber como você consegue saber qual é a "class" correspondente a cada botão. Há algum lugar onde se possa consultar? Pois eu consigo entender as propriedades..

Obrigado,
Kvothe
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

Ver perfil do usuário http://landofhaeron.forumeiros.com
  • 0

Resolvido Re: Botões em efeitos hover com CSS

Mensagem por Alex Habilidade em 17/01/14, 01:34 pm

Olá Kvothe,

Eu procuro as classes e as id´s utilizando o próprio sistema do navegador chamado de inspecionar elemento - Para acionar está ferramenta o senhor deve clicar o com o botão direito do mouse e ir na opção inspecionar elemento.

Fazendo isto o senhor tem a acesso a todo o código da página que você está.

Cordiais Saudações;
Alex!Piscada
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: Botões em efeitos hover com CSS

Mensagem por Kvothe em 18/01/14, 08:54 pm

Compreendo, isso facilitará muito o meu trabalho no fórum. Problema resolvido!

Muito obrigado,
Kvothe
avatar

Kvothe
Usuário destaque

Masculino
Inscrito dia : 22/12/2012
Mensagens : 945
Pontos Ativos : 1372

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