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

Esqueci minha senha

Últimos assuntos
» Como remover essas bordas dos avatares?
Hoje à(s) 06:58 am por AlexG

» Como adicionar um fundo a barra de menus?
Hoje à(s) 01:38 am por SetRaiden

» Preciso de uma logo
Hoje à(s) 01:05 am por odelgado

» [FAQ] Gerir e configurar o Topic'it no seu fórum Forumeiros
Ontem à(s) 11:15 pm por Shek

» Preciso de Ajuda.
Ontem à(s) 11:12 pm por Shek

» Plaquinhas de Rank para o meu Fórum
Ontem à(s) 07:41 pm por Lost154

» Publicidade bugada
Ontem à(s) 07:31 pm por virus

Instale agora o aplicativo Topic'it e acesse o suporte de Forumeiros pelo celular.
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
247 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 244 Visitantes :: 2 Motores de busca

IsmaelS., MARCUS198O, virus

[ 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
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário 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 : 3107
Pontos Ativos : 4509

Ver perfil do usuário 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
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário 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 : 3107
Pontos Ativos : 4509

Ver perfil do usuário 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
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário 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!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4321
Pontos Ativos : 5618

Ver perfil do usuário 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