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上空盘旋时，你正在离开叠加层，从而导致它淡出。通过使其成为叠加层的子项，将鼠标悬停在叠加层上不再有任何作用。

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

1 个答案: