Question

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

我的问题是，一旦你盘旋，并且辅助div滑开，我不能将其悬停在它上面而不会消失。我能找到的唯一解决方案是使整个周围的图像元素成为'悬停'触发器。但只要你将鼠标悬停在“了解更多”位上，我就不希望它只是悬停在图像上时显示。

我也不是需要设置计时器才能保持打开的粉丝。它应该在您悬停时打开，在您离开时关闭。它还必须能够显示回IE8。到目前为止，我的jQuery非常简单。

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

这是我的小提琴（第一次使用js小提琴，所以希望我把它连接起来。请告诉我，如果不是）：http://jsfiddle.net/adren51407/x7E82/

Answer 1

你可以试试这个：

Example

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

当您悬停“了解更多”时，“更多文字”会向上滑动，然后当您不悬停整个“imgsurround”div时，只会向下滑动。

<强>更新

您可以按照自己的意愿执行此操作： example 2 。假设您只在可见的情况下悬停“更多文本”，您可以在“更多文本”div上应用slideUp规则。

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

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

请注意，在第二个解决方案中，当您将鼠标悬停在“了解更多”并且不悬停“更多文字”时，即使您不再徘徊在两者中，它也会保持可见。

jquery slideDown没有保持开放状态

1 个答案: