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
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
170 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 167 Visitantes :: 2 Motores de busca

MateusV., PESS_dodo, Shek Crowley

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

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 Qui 23 Fev 2017 - 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: 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 : 585
Pontos Ativos : 1616

http://testealrpg.forumeiros.com
  • 0

Resolvido Re: Efeito hover nas tabelas

Mensagem por while em Qui 23 Fev 2017 - 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.


Flecha ajudeiros Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Flecha ajudeiros Respeite as Regras da seção de Suporte.
Flecha ajudeiros MP apenas para assuntos importantes!
Flecha ajudeiros Seu tópico foi resolvido ? Não se esqueça de clicar no
avatar

while
Ajudeiro
Ajudeiro

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

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 Qui 23 Fev 2017 - 1:08

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 : 585
Pontos Ativos : 1616

http://testealrpg.forumeiros.com

Resolvido Re: Efeito hover nas tabelas

Mensagem por while em Qui 23 Fev 2017 - 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.
avatar

while
Ajudeiro
Ajudeiro

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

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 Qui 23 Fev 2017 - 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.
avatar

iScroll
Usuário destaque

Masculino
Inscrito dia : 08/03/2015
Mensagens : 585
Pontos Ativos : 1616

http://testealrpg.forumeiros.com

Resolvido Re: Efeito hover nas tabelas

Mensagem por Kyo Panda em Qui 23 Fev 2017 - 11:19

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 : 3089
Pontos Ativos : 6381

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