javascript - jQuery 悬停淡入/淡出/滑动切换

Question

当我悬停时，我可以获得我需要的效果，但是当我将鼠标移动到“我的列表”a标签时，#bbdiv 消失了。我怎么能让它留在那里，因为我需要点击它。

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/