將鼠標懸停在圖像上會導致嵌套div閃爍和mouseout

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/