Jquery 滚动文本/链接时保持图像褪色

在文本/链接上滚动时尝试使图像褪色

<div class="overlay">
  <div id="hover"></div>
</div>

<div class="pic_info"><a href="#">blah</a></div>



$('.overlay, #hover_small').on('mouseenter', function() {
    $(this).find('#hover, .overlay_small, .pic_info').stop().animate({opacity: 0}, function() {
    $('.pic_info').fadeIn();
  });
});

$('.overlay, #hover_small').on('mouseleave', function() {
    $('.pic_info').fadeOut(300);
    $(this).find('#hover, .pic_info').stop().delay(100).animate({opacity: 1,}, function()     {
  });
});

$（'.overlay，#hover_small'）.on（'mouseenter'，function（）{
$（this）.find（'#hover、.overlay_small、.pic_info'）.stop（）.animate（{opacity:0}，function（））{
$（'.pic_info'）.fadeIn（）；
});
});
$（'.overlay，#hover_small'）.on（'mouseleave'，function（）{
$（'.pic_info'）。淡出（300）；
$（this）.find（'#hover，.pic_info'）.stop（）.delay（100）.animate（{opacity:1，}，function（））{
});
});

如果您将pic_info移动到覆盖div内部，然后在特定点停止淡入淡出，它就会工作

<div class="overlay">
    <div id="hover"></div>
    <a href="#"><div class="pic_info"><h4><i><u>Motion</u></i></h4><h2>'CREO' Experimental Short</h2></div></a>
</div>

---

主要的问题是当你把鼠标悬停在pic_信息上时，你正在离开覆盖层，从而导致它淡出。通过使其成为覆盖的子对象，将鼠标悬停在其上不再起任何作用。

如果这有帮助，则不使用usre，但您可能希望查看jQuery

$('.overlay, #hover_small').on('mouseenter', function () {
    $(this).find('#hover, .overlay_small').stop().animate({
        opacity: 0
    }, function () {
        $('.pic_info').fadeIn();
    });

});

$('.overlay, #hover_small').on('mouseleave', function () {
    $('.pic_info').fadeOut(300);
    $(this).find('#hover').stop().delay(100).animate({
        opacity: 1,
    }, function () {

    });
});