当您将另一个 div 悬停在同一个 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

改用这个：

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。