jquery - 翻转文本/链接时保持图像褪色

Question

http://jsfiddle.net/L43ec/ 尝试在文本/链接上翻转时保持图像褪色

<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()     {
  });
});

Answer 1

如果您将 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>

和

$('.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 () {

    });
});

主要问题是当您将鼠标悬停在 pic_info 上时，您将离开覆盖层，从而导致其淡出。通过使其成为叠加层的子项，将鼠标悬停在其上不再执行任何操作。