jquery - appendTo が別の DIV の DIV で機能しない理由

Question

マウスオーバーで「メニュー DIV」を他の DIV 間で移動したい。しかし、ある DIV の外にマウスを移動すると、「メニュー DIV」が消えます。

JSFIDDLE デモ : http://jsfiddle.net/ynternet/HhzVC/

HTML

 <div id="menu">
    <a href="#">Link</a>
    <a href="#">Link</a>
 </div>
 <div id="container">
    <div id="divA"><br>&nbsp;</div>
    <br>
    <div id="divB"><br>&nbsp;</div>
    <br>
    <div id="divC"><br>&nbsp;</div>
    <br>
    <div id="divD"><br>&nbsp;</div>
 </div>

CSS

#menu{
   position: absolute;
   background-color: yellow;
}
#divA{
   background-color: blue;
}
#divB{
   background-color: red;
}
#divC{
   background-color: cyan;
}
#divD{
   background-color: brown;
}

Jクエリ

$("#container div").live({
     mouseover: function() {
         $('#menu').appendTo($($(this)));
     }
});

Answer 1

#menu$("#container div")マウスがそのような一致した要素の上に置かれるたびに、セレクターの結果に移動されます。#menudiv であるそれ自体も、$("#container div")そのような要素内に移動されると一致します。

これを回避するためのオプションはいくつかありますが、最も直接的な方法は、一致したセレクターが#menu.

$("#container div").live({
        mouseover: function() {
            if( $(this).closest("#menu").length ){ return; }
            $('#menu').appendTo($(this));
        }
});​

この操作全体は:hover、ドキュメント内で単一のメニューを移動するのではなく、CSS を使用して で既存のメニューを非表示/表示するだけで、おそらく JavaScript を使用しない方が適切に実行できることに注意してください。