悬停在图像上会导致嵌套 div 上的闪烁和鼠标悬停

Question

我在一个页面上有一系列照片，当你将鼠标悬停在它们上面时，白色的效果会淡入，并且标题和说明会出现在上面。

我遇到的问题是，如果我将鼠标悬停在文本区域上，则白色效果会再次淡出。这是一个奇怪的闪烁问题。

我需要它工作，以便无论您将鼠标悬停在图像上的哪个位置，它始终保持着色，并且无论何时关闭它都会恢复为普通图像。

我的代码如下。

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

Answer 1

改用“mouseEnter”和“mouseLeave”事件。 对于纯 javascript 代码，这些事件是专有的，只能在 IE 中正确收听。 但是 jquery 对它们进行了规范化，并使它们在所有浏览器中都可以访问。 它们只在您进入父元素时触发一次，而不是每次您将鼠标悬停在每个子元素上时触发。

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

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