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
Conectar-se

Esqueci minha senha

Últimos assuntos
» Sistema de notificação
Hoje à(s) 01:25 pm por Marcelo22m2

» Perfil de usuário no tópicos
Hoje à(s) 01:24 pm por Harleen

» Contador de tópicos/mensagens no Sub-Fórum/Fórum
Hoje à(s) 12:54 pm por Kyo Panda

» Edição do cabeçalho no Modernbb
Hoje à(s) 12:41 pm por Harleen

» O tópico ou mensagem que você está procurando não existe
Hoje à(s) 12:26 pm por paulim78

» Efeito hover perfil
Hoje à(s) 09:26 am por Kyo Panda

» Ajuda com o HTML
Hoje à(s) 03:39 am por Taxy_InSaniTy

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Luiz
 
Marcelo22m2
 
Kyo Panda
 
paulim78
 
APOllO
 
Shek
 
Lincoln
 
>.< T-T =3
 
b@nzé
 

Quem está conectado
302 usuários online :: 10 usuários cadastrados, Nenhum Invisível e 292 Visitantes :: 2 Motores de busca

'Dante, APOllO, Appoloz, Connor R., Harleen, Kyo Panda, lukas442, Marcelo22m2, paulim78, Shek

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Efeito hover nas tabelas

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

Resolvido Efeito hover nas tabelas

Mensagem por iScroll em 22/02/17, 09:22 pm

Detalhes da questão


Endereço do fórum: http://www.brasilplayultimate.forumeiros.com/forum
Versão do fórum: PunBB

Descrição


Olá, gostaria do seguinte efeito:

Normal: http://i.imgur.com/JjLEU7k.png?2

Passando o mouse em cima: http://i.imgur.com/Dc6GoX3.png?1

Fórum onde vi: www.brasilplaystart.com.br/forum

Seria possível? isso aí ta só pra Widget, gostaria das Tabbles também.
avatar

iScroll
Usuário destaque

Masculino
Inscrito dia : 08/03/2015
Mensagens : 769
Pontos Ativos : 1064

http://testealrpg.forumeiros.com
  • 0

Resolvido Re: Efeito hover nas tabelas

Mensagem por while em 22/02/17, 09:47 pm

Olá autor, boa noite.

Adicione em sua folha de estilo css este código:

Código:
#right > div > div.main-head {border-bottom: 1px solid #191919!important;
    text-shadow: rgba(149, 30, 44, 0.9) 0px -1px 0px!important;
    background: #1a1a1a url(http://i.imgur.com/bNLB8Go.png) repeat 18%!important;
    padding: 8px!important;
    transition: all .5s ease-in-out!important;
}
#right > div > div.main-head:hover {background: #76BA6D!important;}

Depois disto, crie um novo javascript com investimento em todas as paginas com esse código:

Código:
var image_widget_src = "http://i73.servimg.com/u/f73/18/10/89/49/th/tog-wi10.png";

$(function(){
  $('<img class="tog-widget" style="float: right; height: 17px; width: 17px; margin-top: -23px; margin-right: 3px; cursor: pointer;"></img>').insertAfter('#right > div > div.main-head');
  $(".tog-widget").each(function(){
    $(this).attr("src", image_widget_src );
    $(this).click(function(){
      $(this).next().slideToggle("slow");
    });
  });
});

Obs: o javascript é para ocultar os widgets de forma individual igual ao utilizado no fórum citado.

Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3105
Pontos Ativos : 4499

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Efeito hover nas tabelas

Mensagem por iScroll em 22/02/17, 10:08 pm

Olá @while

Ficou assim : http://i.imgur.com/fLvVFKW.png (Editei o código ao meu gosto)

Ficou faltando nas tables como "Ultimos assuntos", "Administração", "Servidor em Geral" , etc... Teria como colocar também?

OBS: Acho que ocorreu um conflito entre JS, repare bem: http://i.imgur.com/CrzkB2Z.png?1

Na outra print que te mandei logo acima está sem isso "AZUL" marcando em qual link estou (/forum - Ínicio), não sei explicar bem, as imagens já mostra, acho que o senhor entendeu.
avatar

iScroll
Usuário destaque

Masculino
Inscrito dia : 08/03/2015
Mensagens : 769
Pontos Ativos : 1064

http://testealrpg.forumeiros.com

Resolvido Re: Efeito hover nas tabelas

Mensagem por while em 22/02/17, 10:20 pm

Isto é fácil... Não sei bem como você editou, então repare:

Código:
#right > div > div.main-head {}
#right > div > div.main-head:hover {}

São essas as duas divs usadas portanto você troca para:

Código:
div.main-head {}
div.main-head:hover {}

No caso ficaria assim:

Código:
div.main-head {border-bottom: 1px solid #191919!important;
    text-shadow: rgba(149, 30, 44, 0.9) 0px -1px 0px!important;
    background: #1a1a1a url(http://i.imgur.com/bNLB8Go.png) repeat 18%!important;
    padding: 8px!important;
    transition: all .5s ease-in-out!important;
}
.main-head:hover {background: #76BA6D!important;}

Troque o js por este:

Código:
var image_widget_src = "http://i73.servimg.com/u/f73/18/10/89/49/th/tog-wi10.png";

$(function(){
  $('<img class="tog-widget" style="float: right; height: 17px; width: 17px; margin-top: -23px; margin-right: 3px; cursor: pointer;"></img>').insertAfter('.module.main .main-head');
  $(".tog-widget").each(function(){
    $(this).attr("src", image_widget_src );
    $(this).click(function(){
      $(this).next().slideToggle("slow");
    });
  });
});





Edit: Adicione mais esse código em sua folha de estilo css:

Código:
#fa_ticker > div > div > div > div > div > div > div > div.h3 > img , #fa_ticker > div > div > div > div > div > div > img {display:none!important;}

Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3105
Pontos Ativos : 4499

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Efeito hover nas tabelas

Mensagem por iScroll em 22/02/17, 10:32 pm

Certo, obrigado, mas acabei optando por deixar sem isso mesmo pois achei meio estranho, desculpe tomar teu tempo, funcionou perfeitamente quem quiser depois poderá já usar ele quando alguém procurar algo do gênero.
avatar

iScroll
Usuário destaque

Masculino
Inscrito dia : 08/03/2015
Mensagens : 769
Pontos Ativos : 1064

http://testealrpg.forumeiros.com

Resolvido Re: Efeito hover nas tabelas

Mensagem por Kyo Panda em 23/02/17, 08:19 am

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3638
Pontos Ativos : 4859

http://ajuda.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