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

Question

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

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

我可以用jquery实现这个目的：

$("h2").hover(function() {
    $(this).next().slideDown();
}, function() {
    $(this).next().slideUp();
});

问题是，当一个人在显示之后将其拖过该段时，它就会消失。有没有什么方法只有当从标题或段落中删除鼠标时才会触发mouseout事件？

Answer 1

现场检查jsFiddle

HTML

<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>

CSS

p{
  display:none;  
}

JQuery的

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

旧的JQuery代码仅供参考：

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