Efeito hover nos sub fóruns

+6
Consolado
Firenando
Roevs
Oto!
Ace
killerplay
10 participantes

Página 2 de 2 Anterior  1, 2

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

  • 0

Tópico resolvido Efeito hover nos sub fóruns

Mensagem por killerplay 28.01.13 21:49

Relembrando a primeira mensagem :

Qual é minha questão:
Gostaria de Saber como faz o Efeito Hover nos Sub Foruns igual o do www.narutorpgakatsuki.com
Ele está invisivel ai quando coloca o mouse por cima eles aparecem!


Imagem sem o Mouse > https://2img.net/h/oi49.tinypic.com/xepqxc.png
Imagem com o MOuse > https://2img.net/h/oi50.tinypic.com/vxmekn.png

a Versao do Meu FOrum e PunBB

Endereço do meu fórum:
https://ajuda.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por killerplay em 13.02.13 15:10, editado 2 vez(es)
killerplay

killerplay
****

Membro desde : 23/02/2011
Mensagens : 216
Pontos : 354

http://narutolegendrpg.ativoforum.com

Ir para o topo Ir para baixo


Tópico resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay 10.02.13 17:11

Flooda aqui não --'
killerplay

killerplay
****

Membro desde : 23/02/2011
Mensagens : 216
Pontos : 354

http://narutolegendrpg.ativoforum.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito hover nos sub fóruns

Mensagem por Solkis 10.02.13 20:59

Boa tarde,

Tente com esse código JS para fazer com que os subfóruns apareçam suavemente:
Código:
jQuery(function() {
    jQyery('.table tbody.statused tr td.tcl').over(function() {
        jQuery(this).find('.sublinks').show('slow');
    },
    function() {
        jQuery(this).find('.sublinks').hide('slow');
    });
});

Além disso, remova isso do seu CSS:
Código:
.table tbody.statused tr td.tcl:hover .sublinks{display:block}
Até mais.
Solkis

Solkis
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/01/2008
Mensagens : 9983
Pontos : 12071

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito hover nos sub fóruns

Mensagem por Luciano98 11.02.13 7:01

Olá!

Utilize esse código Javascript:
Código:
jQuery(document).ready(function(){jQuery('.table tbody.statused tr td.tcl').hover(function(){jQuery(this).find('.sublinks').show('slow')},function(){jQuery(this).find('.sublinks').hide('slow')})});

Remova esse código CSS:
Código:
.table tbody.statused tr td.tcl:hover .sublinks{display:block}

Até mais.
Luciano98

Luciano98
Membro Entusiasta
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay 11.02.13 14:55

quando eu retiro o codigo css, nao funciona..
killerplay

killerplay
****

Membro desde : 23/02/2011
Mensagens : 216
Pontos : 354

http://narutolegendrpg.ativoforum.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito hover nos sub fóruns

Mensagem por Luciano98 11.02.13 16:34

killerplay escreveu:quando eu retiro o codigo css, nao funciona..
Independente do Javascript funcionar retire esse CSS, como você quer um efeito de transição, enquanto esse CSS estiver ali o Javascript não vai funcionar:
Código:
.sublinks{display:none;font-size:10px;text-align: center;}.table tbody.statused tr td.tcl:hover .sublinks{display:block;}

Tente utilizar esse Javascript:
Código:
jQuery(document).ready(function(){jQuery('.table tbody.statused tr td.tcl').hover(function(){jQuery(this).find('.sublinks').show('slow')},function(){jQuery(this).find('.sublinks').hide('slow')})});

Até mais.
Luciano98

Luciano98
Membro Entusiasta
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay 12.02.13 14:32

não funciona!
killerplay

killerplay
****

Membro desde : 23/02/2011
Mensagens : 216
Pontos : 354

http://narutolegendrpg.ativoforum.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito hover nos sub fóruns

Mensagem por seender 13.02.13 5:24

Olá!

- Código a ser utilizado:
/* Sub-fóruns - Início */

jQuery(document).on('ready', function() {
/* Sub-fóruns que irão ser exibidos */
var subforuns = '<a href="Endereço do sub-fórum" id="subforum">Título do sub-fórum</a>';
/* Sub-fóruns que irão ser exibidos */

var forum = 2;
var css = "#topicsmsgs{display:none;}#subforum{padding:7px 7px 7px 7px;}";

jQuery(document).ready(function() {
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").append("<style>" + css + "</style><div id='topicsmsgs'>" + subforuns + "</div>")
});
jQuery(document).each(function() {
jQuery('li.row:eq(' + forum + '), td.tcl:eq(' + forum + '), td.row2.icon:eq(' + forum + '), td.row1.over:eq(' + forum + ')').mouseover(function(){
jQuery("#topicsmsgs").fadeOut("fast");
});
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").mouseleave(function(){
jQuery("#topicsmsgs").fadeIn("fast");
});
});
}

);
/* Sub-fóruns - Fim */
Vermelho -> Endereço do sub-fórum.
Laranja -> Título do sub-fórum.
Negrito -> É a parte que terá de multiplicar caso queira adicionar mais sub-fóruns, ex:
Código:
<a href="Endereço do fórum 1" id="subforum">Título do sub-fórum 1</a><a href="Endereço do fórum 2" id="subforum">Título do sub-fórum 2</a>
Verde -> Número do fórum que irá adicionar os sub-fóruns.Entenda a partir da imagem abaixo:
Efeito hover nos sub fóruns - Página 2 Sem_t109
  • A contagem dos fóruns irá começar pelo número 0;
  • De forma crescente poderá se obter o número;
  • Para cada fórum deverá multiplicar todo o código.


- Aplicação do tutorial:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Efeito hover nos sub fóruns - Página 2 Painel13
Efeito hover nos sub fóruns - Página 2 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Efeito hover nos sub fóruns - Página 2 110210Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos em todas as páginas.
Efeito hover nos sub fóruns - Página 2 110310Seta Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
Efeito hover nos sub fóruns - Página 2 110410Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

  • Resultado:
    Efeito hover nos sub fóruns - Página 2 Ooo10


Melhores cumprimentos,
seender
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos sub fóruns

Mensagem por killerplay 13.02.13 15:09

Resolvido!
killerplay

killerplay
****

Membro desde : 23/02/2011
Mensagens : 216
Pontos : 354

http://narutolegendrpg.ativoforum.com

Ir para o topo Ir para baixo

Página 2 de 2 Anterior  1, 2

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