我有以下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上，我不知道如何保持显示。以及如果鼠标移开当然如何使其淡出...有任何想法吗？
最佳答案
将#profile_dropdown_content嵌套在#profile_dropdown容器内，并使用悬停事件。
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;
}