可以使用 CSS 将一个元素上的悬停效果级联到另一个元素吗？

对一个元素的影响可以影响另一个元素吗？

给定的代码旨在增强图像的不透明度，同时降低另一个元素的不透明度当光标悬停在图像上时。虽然这样的效果看起来很简单，但仅靠 CSS 无法执行它。

要建立所需的效果，两个受影响的元素必须是代码中的后代或相邻的兄弟元素。

对后代的影响

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

这会影响结构化的元素如下：

<div>
<p><strong>对相邻同级的影响</strong></p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

这适用于 HTML 结构：

<div>
<p>在这两种情况下，选择器中的第二个元素受到影响。</p>
<p>对于查询中注明的特定需求，像这样的表达式可能有效：</p>
<pre class="brush:php;toolbar:false">img:hover + img {
    opacity: 0.3;
    color: red;
}

[JS Fiddle 演示](https://jsfiddle.net/)