保持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/