JQuery slideDown slideUp mouseover mouseout

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16231668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:45:38  来源:igfitidea点击:

JQuery slideDown slideUp mouseover mouseout

jquerymouseoverslidedownslideupmousedown

提问by Alan

what I'm trying to do is to keep video in .slideDown until mouseout text AND video, is that possible? here's my code until now

我想要做的是将视频保留在 .slideDown 中,直到鼠标移出文本和视频,这可能吗?这是我的代码直到现在

Both #text and #video are div

#text 和 #video 都是 div

JS here:

JS在这里:

<script> 
 $(document).ready(function(){
  $("#text").mouseover(function(){
   $("#video").slideDown("slow");
  });
  $("#video").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });
</script>

CSS here:

CSS在这里:

#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
}

#video
{
display:none;
width:1024px;
height:278px;
}

I looked for a solution but couldn't find something that close. Thank you

我寻找了一个解决方案,但找不到接近的东西。谢谢

回答by Daniel

I'm not 100% sure this is what you are trying to do, but i hope it helps:

我不是 100% 确定这就是你想要做的,但我希望它有帮助:

$(document).ready(function() {
  $("#wrap").mouseover(function() {
    $("#video").stop().slideDown("slow");
  });
  $("#wrap").mouseout(function() {
    $("#video").slideUp("slow");
  });
});
#text {
  margin-top: 20px;
  float: center;
  font: VNF-Museo;
  font-size: 40px;
  color: #333;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #000;
}

#video {
  display: none;
  width: 1024px;
  height: 278px;
  border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrap">
  <div id="text">text</div>
  <div id="video">video</div>
</div>

Another example: http://jsfiddle.net/ZyUYN/

另一个例子:http: //jsfiddle.net/ZyUYN/