Publicado em 24 de jul.

[Resolvido] Hover jQuery

Olá pessoal, estou quebrando a cabeça pra tentar fazer com que, ao passar o mouse sobre o "botão" que está dentro no .menu a, ele aciona a função animate e abre o que tem dentro do <em></em>.

Isso está acontecendo, só que o que nao está acontecendo é, ao dar um mouseout tanto no .menu a quanto no em, ele tem que fechar... Como um mostrar/esconder conteúdo...

Alguém consegue me ajudar nisso? Segue o código abaixo:

<script type="text/javascript">
$(document).ready(function(){
$(".menu a").hover(function(){
	$(this).next("em").animate({opacity: "show", top: "38"}, "slow");
});

$(".menu a").hover(function(){
	$(this).next("em").animate({opacity: "hide", top: "38"}, "slow");
});

});
</script>

<ul class="menu">
 <li> <a href="url">Blog Pessoal</a><em>Tecnologia, Internet e tutoriais diversos sobre web</em> </li>
</ul>

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Wanderson Valerio· 24 de jul.

<script type="text/javascript">
$(document).ready(function(){
$(".menu a").hover(function(){
	$(this).find("em").animate({opacity: "show", top: "38px"}, "slow");
});

$(".menu a").hover(function(){
	$(this).find("em").animate({opacity: "hide", top: "38px"}, "slow");
});
});
</script>

<ul class="menu">
 <li>
 <a href="url">Blog Pessoal</a><em>Tecnologia, Internet e tutoriais diversos sobre web</em>
 </li>
</ul>

Leonardo Fuzeto· 24 de jul.

Cara, usando o .find nem rolou... nao funcionou :/

William Bruno· 24 de jul.

o correto, é uma única função com 2 argumentos, assim:

$(".menu a").hover(

 function(){
 $(this).next("em").animate({opacity: "show", top: "38"}, "slow");
 },
 function(){
 $(this).next("em").animate({opacity: "hide", top: "38"}, "slow");
 }
 );

e continue usando o next() mesmo. O find, seria caso o EM fosse filho do A, oque não é o teu caso.

Leonardo Fuzeto· 24 de jul.

Certo, só que mesmo assim não dá certo do jeito que preciso.

Pois é assim, no bloco que vai abrir que está dentro da tag <em></em> vai ter um link VER MAIS.

O usuário vai clicar sobre esse link, então só poderá acionar o HIDE quando ele der mouseout no elemento <em></em>

É isso que não to conseguindo fazer...

William Bruno· 24 de jul.

Então você deve fazer algo assim:

 $(".menu a").mouseenter(function(){
 $(this).next("em").animate({opacity: "show", top: "38"}, "slow");
 });

 $(".menu em").mouseleave(function(){
 $(this).animate({opacity: "hide", top: "38"}, "slow");
 });

 entendeu ?

exatamente oq você disse, em código.

Ou se você precisar que feche, qndo for de um item para o outro, ai você deve disparar no elemento pai o hover(o LI), e não mais o A.

Ai então ficaria:

$(".menu li").hover(

 function(){
 $(this).find("em").animate({opacity: "show", top: "38"}, "slow");
 },
 function(){
 $(this).find("em").animate({opacity: "hide", top: "38"}, "slow");
 }
 );

 entendeu as diferenças ?

Leonardo Fuzeto· 25 de jul.

Entendido e funcionou certinho.

Muito obrigado pela ajuda.

Tópico Resolvido!