[Resolvido] Hover jQuery

[Leonardo Fuzeto 0]

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>

[Wanderson Valerio 102]

<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 0]

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

[William Bruno 1501]

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 0]

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 1501]

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 0]

Entendido e funcionou certinho.

 

Muito obrigado pela ajuda.

 

Tópico Resolvido!