jquery向下滑动未保持打开状态

我在图片底部有一个“了解更多”部分。当你将鼠标悬停在它上面时，它会在上面展开另一个标题div，解释关于我可以放置文本、链接等的特定部分的更多信息。所有这些都很好

我的问题是，一旦你悬停，第二个div滑开，我就不能在上面悬停而不让它消失。我能找到的唯一解决办法是将整个周围的图像元素作为“悬停”触发器。但我不想让它在您将鼠标悬停在图像上时显示，而只是在您将鼠标悬停在“了解更多”位上时显示

我也不喜欢设置一个计时器让它保持打开状态。它应该在你悬停时打开，离开时关闭。它还必须能够显示回IE8。到目前为止，我的jQuery非常简单

    $( ".learnmore" ).hover( function() {
        $(".moretext").slideDown(600);
    }, function() {
        $(".moretext").slideUp(600);
    });

这是我的提琴（第一次使用js提琴，希望我链接正确。如果没有，请告诉我）：

你可以试试这个：

当您悬停“了解更多”时，“更多文本”将向上滑动，而只有当您不悬停整个“imgsurround”分区时，“更多文本”才会向下滑动

更新

您可以随心所欲地执行此操作：。假设仅当“更多文本”可见时才将其悬停，则可以在“更多文本”div上应用

slideUp

规则

---

请注意，在第二种解决方案中，当您悬停“了解更多”而不悬停“更多文本”时，即使您不再同时悬停两者，它仍将保持可见。

这更接近，但当您离开“了解更多”区域时，它需要消失，即使您没有悬停“更多文本”区域。这可能吗？看看第一个解决方案

$( ".imgsurround" ).hover(
  function() {
      //
  }, function() {
    $(".moretext").slideUp(600);
  }
);

$( document ).ready(function() {
    $( ".learnmore" ).mouseover(
      function() {
        $(".moretext").slideDown(600);
      });

    $( ".moretext" ).mouseout(
       function() {
        $(".moretext").slideUp(600);
    });
});