当您将鼠标悬停在同一div中时，如何防止div消失？

Question

我有一个div。 在这个div内，还有另一个div。 当我将“父” div悬停时，“父” div内的div将褪色（）。 但是，当我将div悬停在“父” div内时，该div会自动淡出（），但是我不希望这种情况发生。 我怎么解决这个问题？

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

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

使用此代替：

查看演示

$("#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); 
   }
);

这是一个工作的jsFiddle 。