悬停不透明度的jQuery

Question

我已经尝试过但未能使其正常工作.基本上我试图得到它,以便当你将鼠标悬停在一个div上时,它应该将兄弟的不透明度改为0.5 class="receiver".

如果你看到这个的jsfiddle,有2个的div class="outerwrapper",都含有2周的div类hover和receiver.当您将鼠标悬停在带有类的div上时hover,receiver不透明度应设置为0.5,但只能设置为同一div(外部包装器)内的一个.

任何帮助将非常感激.提前致谢.

Answer 1

你不需要使用jQuery或JavaScript(尽管你可以¹),CSS在大多数浏览器中都能够实现相同的最终结果:

.hover:hover + .receiver {
    opacity: 0.5;
}

JS小提琴演示.

而且,即使使用"仅"CSS,在现代/兼容的浏览器中,也可以使用淡入淡出过渡(或严格来说,转换不透明度):

.receiver {
    width: 50px;
    height: 50px;
    background-color: blue;
    opacity: 1;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.hover:hover + .receiver {
    opacity: 0.5;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
?

JS小提琴演示.

1. 我也打算提供一个JavaScript/jQuery解决方案,但是现在还有其他几个已经发布了,我宁愿不再重复别人的回答(只是感觉像是抄袭/复制).