Question

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

Answer 1

这应该有效：

$('.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 2

不透明度不这样！如果你在DIV中添加了30％的不透明度，那么这个DIV中的所有东西也会得到不透明度。

但你可以用CSS3背景色RGBA：

来做到这一点

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

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

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;
}

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

3 个答案: