在这个jsfiddle中,我希望“#video”div完全向下滑动并停留到鼠标位于“#wrap”上。但即使鼠标位于#wrap 上,它也会上下移动。有什么想法吗?
html:
<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
</div>
CSS:
#text
{
position: absolute;
top:20px;
width: 300px;
height: 200px;
background: #FAAC58;
margin-left:auto;
margin-right:auto;
}
#video
{
position: absolute;
top:20px;
width: 300px;
height: 200px;
display:none;
background: rgba(0,0,0,0.8);
}
J脚本:
$(document).ready(function(){
$("#wrap").mouseover(function(){
$("#video").slideDown("slow");
});
$("#wrap").mouseout(function(){
$("#video").slideUp("slow");
});
});
最佳答案
使用 hover
事件而不是 mouseover
和 mouseout
,您的 mouseover
会在鼠标移动时被触发多次在 div 内移动 #wrap
$(document).ready(function () {
$("#wrap").hover(function () {
$("#video").slideDown("slow");
}, function () {
$("#video").slideUp("slow");
});
});
关于Javascript:div在另一个div上向下滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29566458/