Javascript 为hover的mouseout处理程序组合两个对象

我有一个标题和段落列表如下。我想在用户将鼠标放在标题上时显示特定标题的段落

<h2>Header 1</h2>
<p>some text</p>
<h2>Header 2</h2>
<p>some text</p>

问题是，当一个人在段落被揭示后将鼠标移到该段落上时，它就会消失。是否只有在从页眉或段落中移除鼠标时，mouseout事件才会触发

现场检查 HTML JQuery 旧JQuery代码仅供参考：

$("h2").on("hover",function(e) {
  if(e.type == "mouseenter") {
    $(this).next().slideDown();
  }
  else if (e.type == "mouseleave") {
    $(this).next().slideUp();
  } 
});

---

这仍然会导致OP的问题，即当您将鼠标悬停在其中一个

上时，它会将其隐藏。您希望使用“mouseenter”和“mouseleave”事件，并完全跳过“hover”事件。@Josef向下滑动后，第二段仍然突出。我可以，但我不确定OP是否可以……）@dreamwalker您可以延迟其中一个动画，但为了创造更好的体验，我认为调整元素高度或更改触发动画的内容可能会更好。

<div id="section-1">
    <h2>Header 1</h2>
    <p>some text</p>
</div>
<div id="section-2">
    <h2>Header 2</h2>
    <p>some text</p>
</div>

p{
  display:none;  
}

$("div").hover(function(e) {
  $("p", this).slideDown();
}, function(e) {
  $("p", this).slideUp();
});

$("h2").on("hover",function(e) {
  if(e.type == "mouseenter") {
    $(this).next().slideDown();
  }
  else if (e.type == "mouseleave") {
    $(this).next().slideUp();
  } 
});