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

Question

我有一个非常奇怪的 jquery 行为。我想用动画瓷砖制作一个像背景的网格（不透明度为 0.8，鼠标悬停和鼠标离开时回到 0.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（在背景中）变得可见...