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 を次のように変更します。

<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 2

ここで 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();
});