Question

我想在鼠标悬停时在其他DIV之间移动'menu 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")的结果。作为div的#menu本身，一旦被移动到这样的元素内，也匹配$("#container div")。

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

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

请注意，在没有javascript的情况下，通过使用CSS隐藏/显示:hover上的现有菜单，而不是在文档周围移动单个菜单，可以更好地完成整个操作。

为什么appendTo不适用于另一个DIV中的DIV

1 个答案: