Descrição Fórum

[xBullet_Storm]

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Endereço do fórum : http://projectgames-rpg.forumeiros.com

Descrição do problema

Queria saber como faço para colocar a descrição do meu fórum deste jeito! Já vi uns tutoriais aqui na FdF e não esta do jeito que eu queria! Estão todos em modo slide! E eu queria sem o efeito slide! Quando coloca-se o mouse por cima já aparece-se na hora sem o efeito slide!

[xBullet_Storm]

UP

[EuficoLoko]

Olá!

É só trocar o código do tutorial, por este:

Código:

/* 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").show();
});
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").mouseleave(function(){
jQuery("#topicsmsgs").hide();
});
});
} 

);
/* Sub-fóruns - Fim */

Atenciosamente.

[xBullet_Storm]

Então queria o modo Hover!! Mais sem o efeito slide! não tem como?

[xBullet_Storm]

UP

[Shek]

Bom dia!

Adicione em subfórum o seguinte código:

Código:

<div class="fa_shek" name="forum1">

CONTENT   

</div>

No lugar do nome CONTENT coloque o que deseja, como por exemplo os ícones ou links do seu subfórum. Em seguida, salve. Acesse agora, Visualização > Imagens e Cores > Cores > Folha de estilos CSS > e adicione este CSS:

Código:

div.fa_shek {
opacity: 0;
}
div.fa_shek:hover {
opacity: 1;
}

Agora, salve.

Se quiser repetir para os outros subfóruns, também pode, e eu fiz questão de colocar no seu HTML o name="forum1", que determina o nome para o HTML específico. Então, se for colocar este efeito na descrição de um outro subfórum, troque o nome "forum1" por "forum2" ou algo que lhe agrada.

Atenciosamente,
Shek

Tópico movido de 'Questões sobre JavaScript & jQuery' para 'Questões sobre HTML & BBCode'

[xBullet_Storm]

Este codigo ouve um bug inesperado!

Quando eu nao estou com o cursor do mouse em cima dele ele fica assim http://prntscr.com/62qsz0 !!!
Mais eu quero que ele esconda esse espaço gigante que fica aparecendo!

Quando estou com o cursor do mouse em cima desta area!! ele fica normal do jeito que eu queria http://prntscr.com/62qt81 !!
Nao teria como arrumar o codigo para que ele faça esse espaço em branco desaparecer quando retirado o cursor do mouse de cima desta area!

[EuficoLoko]

Boa noite!

Mantenha o código da descrição:

Código:

<div class="fa_shek" name="forum1">

CONTENT   

</div>

Troque o CSS por esse:

Código:

div.fa_shek {
opacity: 0;
display: none;
}
div.fa_shek:hover {
opacity: 1;
display: block !important;
}

Atenciosamente.

[xBullet_Storm]

Agora a descrição configurada no fórum não aparece!

[Shek]

Nos mostre uma imagem novamente amigo? Grato pela sua compreensão.

Até mais!

[EuficoLoko]

Boa tarde!

Achei um método, para que use a sua descrição normal, e mantenha o hover. Para isto, adicione em sua CSS:

Código:

.tcl:hover > ul {
display: block !important;
}.tcl > ul {
display: none;
}

Adicione a descrição normalmente.

Atenciosamente.

[xBullet_Storm]

@EuficoLoko Codigo nao funcional! Ou nao entendi direito! é so colocar no css? nao precisa mudar nada na descrição!?
@Shek Aqui está a print

Com o primeiro codigo:
Com o cursor do mouse por cima da descrição: http://prntscr.com/62zmqj
Sem o cursor do mouse por cima da descrição: http://prntscr.com/62zn4s

Com o codigo novo:
Com o cursor do mouse por cima da descrição: http://prntscr.com/62znn7
Sem o cursor do mouse por cima da descrição: http://prntscr.com/62znn7

[EuficoLoko]

Teoricamente funcionou, só na parte que testei que continham as UL.
Faça assim, adicione isso antes das descrições:

Código:

<div id="lokogostoso">


E isso no final:

Código:

</div>

Já no CSS, adicione isso:

Código:

.tcl:hover > #lokogostoso {display: block !important;}#lokogostoso {display: none !important;}

Remova aquele outro.

[xBullet_Storm]

hahahahhahahahah deu certo!! vlw zika!!!

[EuficoLoko]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.