Question

我有一个div。在这个div内，还有另一个div。当我悬停“父”div时，“父”div中的div将为fadeIn（）。但是当我将div悬停在“父”div中时，这个div会自动fadeOut（），但我不希望这种情况发生。我该如何解决这个问题？

由于我不善于解释，我做了一个小提琴的例子：

http://jsfiddle.net/9kAkY/

HTML

<div id="preview">
    HOVER THIS BIG DIV

    <div id="previewDesc">
        I don't want this div to fadeOut when I hover over it. 
        How can I prevent this from happening?
    </div>
</div>

这是我使用的jQuery代码。

   $("#preview").hover(function()
   {
       $("#previewDesc").fadeIn(100);                    
   });

   $("#preview").mouseout(function()
   {
       $("#previewDesc").fadeOut(100);                    
   });

这是我使用的CSS

#preview{
    width: 500px;
    height: 200px;
    border: 1px solid #000000;
}

#previewDesc{
    width: 300px;
    padding: 5px;
    background-color: #666666;
    color: #FFFFFF;
    margin: 10px auto;
    display: none;
    border: 2px solid #000000;
}

Answer 1

请改用：

SEE DEMO

$("#preview").mouseenter(function()
   {
       $("#previewDesc").fadeIn(100);                    
   }).mouseleave(function()
   {
       $("#previewDesc").fadeOut(100);                    
   });

Answer 2

不要使用mouseout，.hover()会为您提供2个回调：一个用于悬停时，另一个用于悬停时。使用它们：

$("#preview").hover(
   //called when hovering into the div
   function() {
        $("#previewDesc").fadeIn(100);                    
   },
   //called when hovering out of the div
   function() {
        $("#previewDesc").fadeOut(100); 
   }
);

这是working jsFiddle。

当你在同一个div中悬停另一个div时，如何防止div消失？

2 个答案: