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

Question

I have a series of photos on a page, and when you hover over them, a white tinted effect fades in, and a title and description appear over it.

The problem I have is that if I hover over the text area, then the white tinted effect keeps fading out again. It's a strange flickering issue.

I need it to work so that regardless of where you hover on the image, it always stays tinted, and when however off it goes back to being just the normal image.

My code is below.

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

});

The CSS styles used are:

#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

use "mouseEnter" and "mouseLeave" events instead. For pure javascript code those events are propietary and only listened correctly in IE. But jquery normalizes them and makes them accesible in all browsers. They fire only once when you enter the parent element and not every time you hover on each child.

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

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