jquery animate opacity有其他div的影响吗？奇怪的行为

Question

我有一个非常奇怪的jquery行为。我想制作一个带有动画图块的背景网格（不透明度为.8，然后在鼠标悬停和鼠标移动时返回.25。）

因为这应该是我的背景，它应该对我的内容div产生影响。

不幸的是，它没有按预期工作。内容div（我将其用于测试目的的红色）也会变得生动。

这是link the the site。

Answer 1

部分问题可能是，当您将鼠标悬停在背景图块上时，事件会冒泡到内容div。您可以尝试在事件侦听器中的某处执行此操作：

e.stopPropagation();

Answer 2

我正在调整你的代码以使用.hover()事件，而不是使用mouseover / mouseout，我也使用fadeTo而不是手动设置不透明度。

$(document).ready(function() {
    $('#page-bg ul li img.keyword').hover(function(){
            $(this).fadeTo('slow',0.8);
        }, 
        function() {
            $(this).fadeTo('slow',0.25);
        });     
    ...
});

Answer 3

内容div不是动画，但是page-bg div位于内容的顶部（因为绝对位置），所以当你改变不透明度时，内容div（在后台）变得可见......