Javascript: Div 滑下另一个 div

Question

在这个 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);
}

Jscript:

$(document).ready(function(){
    $("#wrap").mouseover(function(){
    $("#video").slideDown("slow");
         });
    $("#wrap").mouseout(function(){
    $("#video").slideUp("slow");
         });
});

http://jsfiddle.net/ZyUYN/1045/

Answer 1

改为使用 mouseenter 和 mouseleave。它将处理鼠标悬停冒泡 (https://api.jquery.com/mouseenter/)

Answer 2

mouseover()和mouseout()函数会在鼠标移动时连续调用。尝试改用 mouseenter() and mouseout() 以便事件仅触发一次：

$("#wrap").mouseenter(function() {
    $("#video").slideDown("slow");
});
$("#wrap").mouseleave(function() {
    $("#video").slideUp("slow");
});

这是 link 到 an updated JSFiddle。

Answer 3

当#video向下滑动时，它出现#wrap所以鼠标指针变成#video然后$("#wrap").mouseout被触发

试试这个：

$(document).ready(function(){
    $("#wrap").mouseover(function(){
    $("#video").slideDown("slow");
         });
    $("#video").mouseout(function(){
    $("#video").slideUp("slow");
         });
});

Answer 4

使用 hover 事件代替 mouseover 和 mouseout，当鼠标在 div 中移动时，您的 mouseover 会被多次触发 #wrap

$(document).ready(function () {
    $("#wrap").hover(function () {
        $("#video").slideDown("slow");
    }, function () {
        $("#video").slideUp("slow");
    });
});

fiddle

Answer 5

当您的#video div 覆盖#wrap div 时，它会触发mouseout 事件。一种选择是在 #video 和 #wrap 上方使用第三个透明 div 并使用它来触发事件：

<div id="wrap">
    <div id="text">text</div>
    <div id="video">video</div>
    <div id="cursor"></div>
</div>

$(document).ready(function(){
  $("#cursor").mouseover(function(){
   $("#video").slideDown("slow");
  });
  $("#cursor").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });

这是更新后的工作代码：http://jsfiddle.net/tf4qhoxs/

Javascript: Div 滑下另一个 div

Javascript: Div slide down on another div

javascript

jscript