jQuery悬停fadein / fadeout / slidetoggle

Question

当我onHover选项，我可以得到的效果我需要什么，但是当我把鼠标移动到“我的名单” a标签， #bb DIV消失。 我怎么能让它留在那里，因为我需要点击它。

HTML：

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

jQuery的：

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

这里的在线样本 - http://jsfiddle.net/9tjZK/

Answer 1

更改HTML，因此锚点位于绑定mouseenter / leave事件的元素内：

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

小提琴

Answer 2

将您的HTML更改为：

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

和jQuery代码：

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

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

演示： http ： //jsfiddle.net/9tjZK/9/

Answer 3

在这里工作jsFiddle - 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/