Jquery при наведении на изображение вызывает мерцание и наведение указателя мыши на вложенном div - PullRequest
Новая
       19

Jquery при наведении на изображение вызывает мерцание и наведение указателя мыши на вложенном div

0 голосов
/ 16 декабря 2011

Привет всем, надеясь, что кто-то может мне помочь.

У меня есть серия фотографий на странице, и когда вы наводите на них курсор, появляется эффект белого оттенка, и над ним появляются заголовок и описание.

Проблема, с которой я столкнулся, заключается в том, что при наведении курсора на текстовую область белый оттенок снова исчезает. Это странная мерцающая проблема.

Мне нужно, чтобы он работал так, чтобы независимо от того, где вы наводите курсор на изображение, оно всегда оставалось подкрашенным, а когда выключено, оно возвращалось к обычному изображению.

Я пытаюсь научиться кодировать, так что держись со мной. Я обнаружил похожие проблемы в других постах, но не могу понять, как их предложения будут применяться к моему коду.

Мой код указан ниже. 

$('div.project-image a img').mouseover(function() {
    $('div.hover').css('filter', 'alpha(opacity=70)');
            $('div.hover', $(this).parent().parent()).fadeIn(500);
});
    $('div.hover').mouseout(function() {
    $('div.hover').css('filter', 'alpha(opacity=70)');
    $('div.hover', $(this).parent().parent()).fadeOut(500);
});
    $('div.hover').bind('click', function(e) {
    window.location = $(this).parent().children('a').attr('href');

});

Используемые стили CSS: 

#content div.project-image (styles the image area)
#content div.hover (displays the white tinted image)
#content div.hover h1 (styles the title)
#content div.hover p (styles the description)

1 Ответ

7 голосов
/ 16 декабря 2011

вместо этого используйте события "mouseEnter" и "mouseLeave".Для чистого кода javascript эти события являются проповедническими и корректно прослушиваются только в IE.Но jquery нормализует их и делает их доступными во всех браузерах.Они срабатывают только один раз, когда вы вводите родительский элемент, а не каждый раз, когда вы наводите курсор на каждого дочернего элемента.

http://api.jquery.com/mouseleave/

http://api.jquery.com/mouseenter/

...