使用淡入淡出效果在鼠标悬停时将 div 覆盖在图像上答案

【问题标题】：Overlaying a div upon an image on mouseover with fadein fadeout effects使用淡入淡出效果在鼠标悬停时将 div 覆盖在图像上
【发布时间】：2014-03-16 23:45:06
【问题描述】：

我在图像上创建了一个叠加层，当鼠标悬停在图像上时它会起作用。我使用 jquery 淡入淡出效果使覆盖层出现并淡出消失。叠加层是一个包含一个段落的 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>

【问题讨论】：

是因为当它淡出时，你的指针mouseovers又是图片了，

标签： jquery overlay fadein fadeout

【解决方案1】：

改用：

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

【讨论】：

【解决方案2】：

这是因为fadeOut末尾有一个display:none，所以当你在fadeOut完成后移动鼠标时会触发取消悬停功能。相反，只需为不透明度设置动画即可。

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

See demo

【讨论】：