jquery - 要素は、divのマウスオーバー/子の要素でクリッピングされています

Question

div内にホバーしているときに、いくつかのボタンを表示したいと思います。

// HTML

<div id="overdiv"> 
<p>Move your mouse several times on this text to see the bug</p> 
<input type="button" value="hello" class="elements"/> 
</div>

// CSS

#overdiv {background:#CCC;border:1px solid #FFF;width:300px;height:150px;}
.elements {display:none;}

// JS

$('#overdiv').mouseover(function(){$('.elements').fadeIn();}).mouseout(function(){$('.elements').fadeOut();});

それは機能しますが、マウスがdiv内の他の要素にカーソルを合わせると、ボタンがループで表示されたり消えたりします。（私はChromeでのみテストしました）

では、マウスがdiv内にあるときにボタンを一度表示し、マウスが外にあるときにボタンを1回非表示にするにはどうすればよいですか？

score 2 · Accepted Answer

「mouseover」-イベントの代わりに、「mouseenter」を使用します。

$('#overdiv').mouseenter(function(){$('.elements').fadeIn();}).mouseleave(function(){$('.elements').fadeOut();});

説明：「mouseover」と「mouseout」はすべての要素とその子に対してトリガーされるため、テキストを「mouseout」すると、「mouseout」イベントがトリガーされます。

score 1 · Accepted Answer

この方法で問題を解決してみてください.....

$（'＃overdiv'）。mouseenter（function（）{$（'。elements'）。fadeIn（）;}）; $（'＃overdiv'）。mouseleave（function（）{$（'。elements'）。fadeOut（）;}）;

2 に答える 2