Javascript Jquery slideup slidedown意外行为

我发现了很多类似的问题，但找不到能解决我问题的答案

我有一个id为“first”的div。我只想在鼠标位于div'one'上时在第一个div上滑下另一个id为'second'的div，在鼠标离开该div时滑出div'second'

下面的代码运行良好，但存在一些问题

1） 当mose进入时，它会滑动两次

2） 当第二个div按下时，我将鼠标移到div上，它会再次滑动

你能帮我得到我想要的结果吗

html

<div>
<div id="zero"><div>
<div id="my_hover">
    <div id="second"></div>
     <div id="first"></div>
</div>
<div id="third"></div>  
</div>

好的，给你：

var$second=$（“#second”）；
$（“#first”）.hover（函数（）{
$second.stop（）.slideDown（“slow”）；
}，函数（）{
$second.stop（）.slideUp（“慢”）；
});
div{
宽度：100px；
高度：100px；
背景：绿色；
右边距：10px；
浮动：左；
位置：绝对位置；
排名：0；
左：0；
}
#第二{
显示：无；
背景：黄色；
指针事件：无；
}

1.
2
我已经试用了您的代码，它运行良好：

$(document).ready(function(){
  $("#first").mouseenter(function(){
   $("#second").stop().slideDown("slow");
  });
  $("#first").mouseout(function(){
   $("#second").slideUp("slow");
  });
 });

见示例：
最简单的方法是添加
指针事件：无
到
#第二个
div CSS，并将其放置在
#第一个
div上方

指针事件：无
除了指示该元素不是鼠标事件的目标之外，值
none
指示鼠标事件“穿过”该元素，并以该元素“下面”的任何内容为目标。
（…）

元素永远不是鼠标事件的目标；但是，如果子体的指针事件设置为其他值，则鼠标事件可能以其子体元素为目标。在这些情况下，在事件捕获/气泡阶段，鼠标事件将在往返子代的途中触发此父元素上的事件侦听器（视情况而定）



$（文档）.ready（函数（）{
var幻灯片=$（“#秒”）；
$（“#first”）.hover（函数（）{
slide.stop（）.slideDown（“slow”）；
}，函数（）{
slideUp.slideUp（“慢”）；
});
});
#第一{
宽度：100px；
高度：100px；
背景：红色；
}
#第二{
位置：绝对位置；
显示：无；
宽度：100px；
高度：100px；
背景：蓝色；
指针事件：无；
}

第二
首先
您可以将第二个
div
作为第一个
div
的子对象，通过使用相对/绝对定位，您可以实现您想要的目标。
$（文档）.ready（函数（）{
var幻灯片=$（“#秒”）；
$（“#first”）.hover（函数（）{
slide.stop（）.slideDown（“slow”）；
}，函数（）{
slideUp.slideUp（“慢”）；
});
});
#首先{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
}
#第二{
位置：绝对位置；
排名：0；
左：0；
显示：无；
宽度：100px；
高度：100px；
背景：蓝色；
}

弗斯特
第二
点击我
谢谢，但我希望第二个div向下滑动到第一个div上。很抱歉没提那件事。我已经编辑了我的问题。没问题。还有三行CSS。回答：太好了！你解决了第一个问题。但第二个仍然存在。当鼠标在div内移动时，我不希望它滑动，但只有当鼠标离开div框时，我才希望它滑动。我看到第一个问题也没有解决。它仍然会滑动几次，当到达鼠标光标时，它无法再向下滑动。嗯？这对我来说非常好。div 2完全向下滑动，然后只要鼠标在div 1上，它就会保持向下。你在用什么浏览器？我想让第二个div在第一个div上向下滑动。很抱歉没提那件事。我已经编辑了我的问题。它阻止了鼠标的交互。@educteyeyourself是的。使用
指针事件更新了关于
指针事件的答案：无是一种不好的做法，我想。假设OP想在第二个div中添加一个按钮，那么该按钮将无法再单击。@教育你自己，这听起来像是定位问题。”。它对你有用。另外，你必须自己关闭这个
zero
div（缺少结束斜杠）@educatey，添加
clear:两个
CSS规则到
#my_hover
-（这是因为您在div上使用了
float:left
）
$(document).ready(function(){
  $("#first").mouseenter(function(){
   $("#second").stop().slideDown("slow");
  });
  $("#first").mouseout(function(){
   $("#second").slideUp("slow");
  });
 });