Efeito hover nas tabelas

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.

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.

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.

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.

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.