JQuery Анимация непрозрачности имеет влияние других Div?странное поведение

Question

У меня действительно странное поведение jquery. Я хочу сделать сетку в виде фона с анимированными плитками (непрозрачность до 0,8 и обратно до 0,25 при наведении курсора мыши и отпускании мыши).

Так как это должно быть моим прошлым, это не должно влиять на мой контент div.

К сожалению, это не работает, как ожидалось. Контент div (который я выделил красным для тестирования) тоже оживляется.

Вот ссылка на сайт .

Answer 1

Я настраиваю ваш код для использования события .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 2

Div содержимого не анимирован, но div page-bg находится сверху содержимого (из-за абсолютной позиции), поэтому при изменении непрозрачности div содержимого (в фоновом режиме) становится видимым ...

Answer 3

Частично проблема может заключаться в том, что при наведении указателя мыши на фоновые плитки событие всплывает до содержимого div.Вы можете попробовать сделать это где-нибудь в ваших слушателях событий:

e.stopPropagation();