保持DIV显示，如果鼠标悬停在它

Question

我有以下的jQuery代码（采取从另一个问题在这里某处）：

$(document).ready(function(){ 
    $("#profile_dropdown").mouseenter(function(){ 
     clearTimeout($(this).data('timeoutId')); 
     $("#profile_dropdown_content").fadeIn("slow"); 
    }).mouseleave(function(){ 
     var someElement = $("#profile_dropdown"); 
     var timeoutId = setTimeout(function(){ 
      $("#profile_dropdown_content").fadeOut("slow"); 
     }, 650); 
     //set the timeoutId, allowing us to clear this trigger if the mouse comes back over 
     someElement.data('timeoutId', timeoutId); 
    }); 
}); 

它能正常工作，但是 - 我无法弄清楚如何保持如果鼠标移过它，则显示#profile_dropdown_content。以及如何使它fadeOut，如果鼠标移出当然...

任何想法？

Answer 1

在#profile_dropdown容器内嵌入#profile_dropdown_content并使用悬停事件。

的jsfiddle：http://jsfiddle.net/UsWYq/1/

JS

$(document).ready(function(){ 
    $("#profile_dropdown").hover(function(){ 
     clearTimeout($(this).data('timeoutId')); 
     $("#profile_dropdown_content").fadeIn("slow"); 
    }, function(){ 
     var someElement = $("#profile_dropdown"); 
     var timeoutId = setTimeout(function(){ 
      $("#profile_dropdown_content").fadeOut("slow"); 
     }, 650); 
     //set the timeoutId, allowing us to clear this trigger if the mouse comes back over 
     someElement.data('timeoutId', timeoutId); 
    }); 
}); 

HTML

<div id="profile_dropdown"> 
    <div class="inner">Hover Me</div> 
    <div id="profile_dropdown_content">Display Me</div> 
</div> 
<div id="profile_dropdown"></div> 

CSS

个

#profile_dropdown { 
    background:whitesmoke; 
    float:left; 
} 
#profile_dropdown .inner { 
    height:100px; 
    width:100px; 
} 
#profile_dropdown_content { 
    display:none; 
    background:red; 
    height:100px; 
    width:100px; 
} 

选项2

你可以做的另一件事是CSS3过渡：http://jsfiddle.net/Ezxm5/

#profile_dropdown { 
    background:whitesmoke; 
    float:left; 
} 
#profile_dropdown:hover #profile_dropdown_content { 
    display:block; 
    opacity:1; 
    height:100px; 
} 
#profile_dropdown .inner { 
    height:100px; 
    width:100px; 
} 
#profile_dropdown_content { 
    opacity:0; 
    background:red; 
    height:0; 
    width:100px; 
    overflow:hidden; 
    -webkit-transition: opacity 0.4s ease-in, height 0.4s ease-out; 
    -moz-transition: opacity 0.4s ease-in, height 0.4s ease-out; 
    -ms-transition: opacity 0.4s ease-in, height 0.4s ease-out; 
    -o-transition: opacity 0.4s ease-in, height 0.4s ease-out; 
    transition: opacity 0.4s ease-in, height 0.4s ease-out; 
}​ 
​ 

Answer 2

包裹在另一个div元素，然后绑定mouseenter和mouseleave功能的包装。

模拟HTML

<div id="profile_wrapper"> 
    <div id="profile_dropdown">Profile Dropdown</div> 
    <div id="profile_dropdown_content">This is some information about me. I write code all day long.</div> 
</div> 

的Javascript

$(document).ready(function(){ 
    $("#profile_wrapper").mouseenter(function(){ 
     clearTimeout($(this).data('timeoutId')); 
     $("#profile_dropdown_content").fadeIn("slow"); 
    }).mouseleave(function(){ 
     var someElement = $("#profile_dropdown"); 
     var timeoutId = setTimeout(function(){ 
      $("#profile_dropdown_content").fadeOut("slow"); 
     }, 650); 
     //set the timeoutId, allowing us to clear this trigger if the mouse comes back over 
     someElement.data('timeoutId', timeoutId); 
    }); 
}); 

http://jsfiddle.net/H7Hvf/1/