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/