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

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

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

fiddle

Answer 2

使用mouseenter和mouseleave代替。它将处理鼠标悬停冒泡（https://api.jquery.com/mouseenter/）

Answer 3

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

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

这是an updated JSFiddle的链接。

Answer 4

当#video向下滑动时，它会出现#wrap，因此鼠标指针会在#video上，然后会触发$("#wrap").mouseout

试试这个：

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

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上滑下来

5 个答案: