javascript - jQuery 悬停不透明度

Question

我已经尝试过但未能成功。基本上，我试图得到它，以便当您将鼠标悬停在一个 div 上时，它应该将具有 class="receiver" 的兄弟的不透明度更改为 0.5。

如果你看到这个jsFiddle ，有 2 个带有 class="outerwrapper" 的 div，并且都包含 2 个类 hover 和 receiver 的 div。当您将鼠标悬停在带有 hover 类的 div 上时，接收器 的不透明度应设置为 0.5，但仅限于同一 div(外包装)内的不透明度。

任何帮助将不胜感激。提前致谢。

Answer 1

您不需要为此使用 jQuery 或 JavaScript(尽管您可以¹)，CSS 非常有能力大多数浏览器都达到相同的最终结果:

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

JS Fiddle demo .

而且，即使使用“仅”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 Fiddle demo .

<小时/>

1. 我也打算提供一个 JavaScript/jQuery 解决方案，但现在已经发布了其他几个解决方案，我不想在自己的答案中重复其他人的答案(这只是感觉例如剽窃/复制)。