Why appendTo doesn't work on DIVs in another DIV

Question

I want to move 'menu DIV' between other DIVs on mouseover. But, when I move mouse outside some DIV, 'menu DIV' disepears.

JSFIDDLE DEMO : 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;
}

JQUERY

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

score 3 · Accepted Answer · answered Sep 18 '12 at 05:42

#menu is being moved to the results of the selector $("#container div") whenever the mouse hovers over such a matched-element. #menu itself, being a div, also matches $("#container div") once it has been moved to inside such an element.

There are several options for avoiding this, but the most direct is to just explicitly not perform the action when the matched selector is the #menu.

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

Note that this whole operation could probably be better done without javascript, by just hiding/showing existing menus on :hover, using CSS, rather than moving a single menu around the document.

Why appendTo doesn't work on DIVs in another DIV

1 Answers1