jQuery mouseenter、mouseleave、appendの奇妙な組み合わせ

Question

jQueryのmouseenterとmouseleaveのイベントを組み合わせて、appendを呼び出すと面白い問題があります。私の目的は、マウスが何かを入力したときに余分な内容を表示し、マウスが離れるときにそれを削除することです。これはStackExchangeのタグにマウスを重ねると何が起こるかと非常に似ています。配列は：mouseenterで

• 、.offsetと.appendを介してマウスの下の要素によってコンテンツと位置を作成します。
• mouseleaveに、そのコンテンツを画面から削除します。

私が操作している要素はimgで、jQuery 1.6.2を使用しています。問題は、.appendが何とかmouseleaveをトリガーし、すぐに.mouseenterが無限に続くことです。削除されて繰り返し追加されるため、追加されるコンテンツには奇妙なちらつき効果が現れます。 jsFiddleの例hereを参照してください。なぜこれが起こっているのですか？どうすれば解決できますか？

EDIT：考え出しました。 D'oh。加えられた内容はマウスの下に現れていた。

Answer 1

このような理由は、マウスのある場所にコンテンツを追加しているためです。その新しいコンテンツはオリジナルの要素の一部ではないので、新しいDIVを表示するときは定義上、あなたのマウスはIMGの上にはありません。

これを解決する1つの方法は、画像を親DIVのバックグラウンドとして使用し、新しいDIVを親に追加して、新しいDIVが親の子であるようにすることです。

サイドノートでは、.hover（）を使用しない理由がありますか？

私はこれをどうやって行うのかは、jsfiddleです。

HTML：

<div class="papa"> 
    <div class='myDiv'> 
     <div id='divHover'>Hello World</div> 
    </div> 
</div> 

Javascriptを/ jQueryの：

$(document).ready(function() { 
    $(".papa").hover(
     function() { 
     $(".myDiv").show(); 
     }, 
     function() { 
     $(".myDiv").hide(); 
     } 
    ); 
}); 

CSS：

.papa { 
    background-image:url('http://dummyimage.com/100x100/000/fff'); 
    height: 100px; 
    width: 100px; 
} 
.myDiv { 
    display: none; 
    height: 30px; 
    border: 1px solid black; 
} 
#divHover { 
    width:100px; 
    height:20px; 
    background-color:white; 
    border:1px solid black; 
    position: relative; 
    top: 10px; 
    left: 10px; 
}