CSS 能否在将鼠标悬停在不同元素上时更改元素的属性？

影响另一个元素悬停在另一个元素上

当单独的元素悬停在其上时是否可以更改元素的属性？此查询深入研究了仅使用 CSS 来实现此行为的方法。

虽然 CSS 的固有功能阻止定位非后代或相邻兄弟姐妹，但在某些特定情况下这是可能的。

后代

如果受影响的元素是悬停元素的后代，CSS 选择器可以有效地定位它使用：

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

例如，这会在悬停时定位“parent_element”内的“child_element”：

<div>
<p><strong>相邻兄弟姐妹</strong></p>
<p>针对相邻兄弟姐妹需要略有不同方法：</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

当“first_sibling”悬停在：

<div>
<p><strong>您案例中的实现</strong></p>
<p>考虑您的样本，您可能会追求类似的目标到：</p>
<pre class="brush:php;toolbar:false">img:hover + img {
    opacity: 0.3;
    color: red;
}

当第一个图像悬停在上面时，这会影响第二个图像。

演示

访问 [this JS Fiddle demo] （在此处插入演示链接）查看交互式示例。