javascript - jQuery悬停效果影响容器div

Answer 1

不透明度将始终影响所有子元素。

如果您只是想淡出纯色背景色，则可以使用带有 alpha 通道的颜色，例如rgba()or hsla()，但是：

CSS

#container.test {
    background: rgba(255, 0, 0, 0.5); /* 0.5 = 50% transparency */
}

JavaScript

$(function() {
    $('#john').mouseenter(function() {
        $('#container').addClass("test");
    }).mouseleave(function () {
        $('#container').removeClass("test");
    });
});

http://jsfiddle.net/FTERP/2/

Answer 2

在你的 mouseenter 调用 put

$('#container').css({'opacity' : '.4'});

您需要将其他 2 个 div 移出容器 div 才能执行此操作，因为它会影响所有子项，您可以将其设置为绝对值，然后将其他 2 个 div 移到它上面。它很脏，但会起作用。

Answer 3

不，这是不可能的，除非孩子们位于它的容器之外。选项：

1. 像其他答案一样使用rgba()，但它不能完全透明；

2. 使用.pngimg，并在悬停时将其替换为透明的。喜欢：

   $('selector').hover(
      function () {
         $(this).parent().css("background-image", "url('transparent.png')");
      },
      function () {
         $(this).parent().css("background-image", "url('normal.png')");
      }
    );