7

大きな div 内にネストされた非表示の div があり、大きな div にマウスを合わせると、非表示の div が下にスライドするように設定します。マウスアウトすると、div がスライドして戻ります。問題は、マウスが小さい div の上に移動すると、mouseout イベントがトリガーされたため、上にスライドさせようとすることです。マウスがどちらの div にも上らないようにするまで、div が再び非表示になるのを防ぐにはどうすればよいですか?

html:

<div id="topbarVis" class="col1 spanall height1 wrapper">
    <div id="topbar"></div>
</div>

(追加のクラスはモジュラー css システムの一部であり、#topbarVis の幅と高さなどを定義します。

CSS:

#topbar {
  width: 100%;
  height: 30px;
  margin-top: -25px;
  background-color: #000;
}

js:

// On Mouseover -> Show
$("#topbarVis").mouseover(function(){
  $("#topbar").animate({marginTop:0}, 300);
});
// On Mouseout -> Hide
$("#topbarVis").mouseout(function(){
  $("#topbar").animate({marginTop:-25}, 300);
});
4

2 に答える 2

5

mouseenter/mouseleave代わりに使用してください:

$("#topbarVis").mouseenter(function(){
  $("#topbar").animate({marginTop:0}, 300);
})
 .mouseleave(function(){
  $("#topbar").animate({marginTop:-25}, 300);
});

...または、次のショートカットであるhover()(docs)mouseenter/mouseleaveメソッドを使用します。

$("#topbarVis").hover(function(){
  $("#topbar").animate({marginTop:0}, 300);
},function(){
  $("#topbar").animate({marginTop:-25}, 300);
});

その理由は、泡立ちやすい性質を持っているからmouseover/mouseoutです。そのため、要素の子孫がイベントを取得すると起動します。一方、泡立たmouseenter/mouseleaveないでください。

非標準イベントを実際にサポートするブラウザは IE だけですが、jQuery はその動作を複製します。mouseenter/mouseleave

于 2011-02-11T21:59:44.960 に答える
0

これはIEで動作します。それが役に立てば幸い。

$("#topbarVis").hover(function(){   $("#topbar").animate({height:"100%"}, 300); },function(){   $("#topbar").animate({height:"0%"}, 300); });

これをCSSとして使用します。

#topbar {   width: 100%;   height:0px;   background-color: #000; }
于 2011-02-11T22:42:49.523 に答える