为什么appendTo不能在另一个DIV中的DIV上工作

Question

我想在鼠标悬停上移动其他DIV之间的“菜单DIV”。但是，当我将鼠标移动到某个DIV的外面时，“菜单DIV”就会消失。

的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))); 
    } 
}); 

Answer 1

#menu只要鼠标悬停在这样的匹配元素上，就会被移动到选择器$("#container div")的结果中。 #menu本身，作为一个div，一旦它被移动到这样一个元素中，它也匹配$("#container div")。

有几个选项可以避免这种情况，但最直接的是在匹配选择器为#menu时明确不执行操作。

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

注意，这整个操作也许可以更好的JavaScript没有完成，仅通过隐藏/显示在:hover现有菜单，使用CSS，而不是移动文件围绕一个菜单。