jquery - 如何降低除悬停在div中的所有内容的不透明度

Question

我在 div 中有一组图像，当您将鼠标悬停在 div 上时，我希望 div 的不透明度为 30%，但将图像悬停在 100% 上。这是我正在寻找的示例http://www.rickanddrew.com/photography/ 我将不胜感激我能得到的任何帮助。

Answer 1

不透明度不能这样工作！如果您将不透明度 30% 放在 DIV 中，则此 DIV 内的所有内容也将获得不透明度。

但是你可以用 CSS3 背景色 RGBA 做到这一点：

DIV {
    background-color: rgba(200,200,200,1);
}
DIV:hover {
    background-color: rgba(200,200,200,0.3);
}

第四个参数是 0 完全不可见而 1 完全可见时 RGBA 的“ALPHA”。

Answer 2

这应该有效：

$('.images').hover(function() {
    $(this).stop().animate({
        opacity: 1
    }).siblings().stop().animate({
        opacity: 0.3
    });
}, function() {
    $(this).siblings().stop().animate({
        opacity: 1
    });
});

虽然我会用 CSS 来做这件事，并使用转换来逐步使动画在支持 CSS3 转换的浏览器上看起来更好：

.img-container {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

#parent:hover > .img-container:not(:hover) {
    opacity: 0.3;
}

演示：http: //jsfiddle.net/bZG6T/

Answer 3

当您将鼠标悬停在图像上以将“褪色”类应用于所有其他图像时，该网站有一个监听器。他们用来实现这一点的javascript是：

function() {
    jQuery('.photo-thumb').hover(

function() {
        jQuery('.photo-thumb').not(this).addClass('faded');
    }, function() {
        jQuery('.photo-thumb').removeClass('faded');
    });
}

他们褪色的类设置了不透明度。

.photo-thumb.faded {
    opacity: 0.3;
}