сохранить изображение блеклым при переходе текста / ссылки

Question

сохранить изображение блеклым при переходе текста / ссылки

0

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

trev 11 нояб. 2013, в 23:11

Источник

0

Не рекомендуется, если это поможет, но вы можете посмотреть в jQuery event.stopPropagation ()
zgood 11 нояб. 2013, в 22:05

Теги:

jquery

1 ответ

Ещё вопросы

Не рекомендуется, если это поможет, но вы можете посмотреть в jQuery event.stopPropagation ()

Kevin B · Accepted Answer · 2013-11-11T21-37-00.000Z

Если вы переместите 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, вы покидали оверлей, тем самым вызывая его исчезновение. Сделав его дочерью наложения, парящий над ним больше ничего не делает.

ааа теперь это имеет больше смысла, спасибо. @ Кевин Б