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/

Jquery悬停在图像上导致嵌套div上的闪烁和mouseout

1 个答案: