jQuery hover fadein/fadeout/slidetoggle

Question

When I onhover I can get the effect what I need, but when I move the mouse to "my list" a tag, #bb div disappeared. how could I make it stays there as I need to click it.

HTML:

<div id="aa">click</div>
<div id="bb"> <a href="">my list</a></div>

jQuery:

$('#bb').hide();
$('#aa').hover(function(){
    $('#bb').slideToggle();
});

Online sample here - http://jsfiddle.net/9tjZK/

Answer 1

Change your HTML, so the anchor is inside the element where you bound the mouseenter/leave event :

<div id="aa">click
    <div id="bb"> 
        <a href="">my list</a>
    </div>
</div>

FIDDLE

Answer 2

Change your HTML to this:

<div id="wrapper">
    <div id="aa">click</div>
    <div id="bb"> <a href="">my list</a></div>
</div>

and jQuery code:

$('#bb').hide();

$("#wrapper").hover(
  function () {
    $('#bb').stop(true, true).slideDown();
  },
  function () {
    $('#bb').stop(true, true).fadeOut();
  }
);

Demo: http://jsfiddle.net/9tjZK/9/

Answer 3

Working jsFiddle here - http://jsfiddle.net/9tjZK/7/ .

HTML:

<div id="container">
<div id="aa">click</div>
<div id="bb"> <a href="">my list</a></div>
</div>

jQuery:

$('#bb').hide();
$('#aa').mouseenter(function(){
    $('#bb').fadeIn();
});

$('#container').mouseleave(function(){
   $('#bb').fadeOut();
});

Answer 4

olo，你可以尝试使用点击事件而不是悬停，这会给你想要的结果。

you can check here http://jsfiddle.net/9tjZK/8/