Efeito hover nas tabelas

3 participantes

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

Tópico resolvido Efeito hover nas tabelas

Mensagem por iScroll 23.02.17 0:22

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: https://i.imgur.com/JjLEU7k.png?2

Passando o mouse em cima: https://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.
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Efeito hover nas tabelas

Mensagem por while 23.02.17 0:47

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

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas tabelas

Mensagem por iScroll 23.02.17 1:08

Olá @while

Ficou assim : https://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: https://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.
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas tabelas

Mensagem por while 23.02.17 1:20

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

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas tabelas

Mensagem por iScroll 23.02.17 1:32

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas tabelas

Mensagem por Kyo Panda 23.02.17 11:19

Efeito hover nas tabelas Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

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

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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