Question

我在图像上创建了一个叠加层，当鼠标悬停在图像上时可以正常工作。我使用jquery fadein效果显示叠加层，淡出到消失。叠加层是一个用段落组成的div。问题是，当我鼠标悬停在段落上时，它再次调用淡出事件，这会产生不必要的闪烁。

<html>
<head>
  <script>
      $(document).ready(function(){
         $('.pic').mouseover(function(){
           $(this).next().fadeIn("fast");
         }); 

          $('.overlay').mouseout(function(){
           $(this).fadeOut("fast");
         });       
      });
  </script>
  <style>
    .overlay{ display:none; position:absolute; top:0; width:100%; }
  </style>
</head>
<body>
  <div class="container">
    <img src="xyz.jpg" class="pic" />
    <div class="overlay">
      <p>Hello guys</p>
    </div>
  </div>
</body>

Answer 1

这是因为fadeOut在其末尾有一个display:none，因此当您在fadeOut完成后移动鼠标时，它将触发取消切换功能。相反，只需为不透明度设置动画。

$('.main-overlay').hover(function() {
    $(this).animate({opacity: 0}, 1000);
}, function() {
    $(this).animate({opacity: 1}, 1000);
})

See demo

Answer 2

改为使用：

$('.container').hover(function () {
    $(this).find('.overlay').fadeToggle("fast");
});

在鼠标悬停时使用fadein淡出效果覆盖图像上的div

2 个答案: