html - マウスオーバーとマウスアウトはイベントを継続的にトリガーしますか？

Question

マウスオーバーで非表示にし、マウスアウトで表示したいネストdivがあります。

ただし、これを実行しようとすると、イベントが継続的にトリガーされます。

コードは非常に長いので、詳細については、たとえば、フィドル@http://jsfiddle.net/jWbZy/16/をチェックしてください。

Answer 1

これは、要素を非表示にすると、カーソルが要素上になくなったときにもmouseoutイベントが発生するためです。代わりに、イベントを親要素に追加して、目的の効果を取得します。

$('.slideshow')
    .mouseover(function(){
        $(this).find('.cp').hide();
    })
    .mouseout(function(){
        $(this).find('.cp').show();
    });

Answer 2

これを行う方法は次のとおりです。

カルーセルパネルの周りにラッパーを追加します（これがcpの略です）：

<div class="cpWrapper">
    <div class="cp">
        <div class="prev"></div>
        <div class="next"></div>
    </div>
</div>

次のスタイルで：

.cpWrapper {
    position: absolute;
    width: 100%; 
    height: 100%; 
}

そして、その子要素を非表示/表示します。

$('.slideshow .cpWrapper').mouseover(function() {
    $(this).find('.cp').hide();
});
// ...

ここでの実例：http：//jsfiddle.net/Kxvuk/