当鼠标悬停在另一个元素上时，CSS 可以单独设置一个元素的样式吗？

使用 CSS 将鼠标悬停在一个元素上以影响另一个元素

问题：

将鼠标悬停在一个元素上实现 CSS 效果直接改变附近另一个元素的外观可能很棘手。尽管尝试实现这样的效果，但仍不清楚是否可以纯粹通过 CSS 来实现。

答案：

将鼠标悬停在某个元素上时影响元素外观的能力使用 CSS 的不同元素受到严格限制。事实上，只有当目标元素是触发元素的后代元素或相邻同级元素时，才能执行此操作。

后代元素：

如果受影响的元素嵌套在触发元素内，CSS 可用于在悬停时对其进行操作：

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

此选择器会将效果应用于具有以下结构：

<div>
<p><strong>相邻兄弟：</strong></p>
<p>对于与触发元素相邻的兄弟元素，需要采用不同的方法：</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
  opacity: 0.3;
}

此选择器将定位以下 HTML 中的元素结构：

<div>
<p><strong>限制：</strong></p>
<p>在这两种情况下，需要注意的是，选择器中指定的后一个元素是悬停时受影响的元素.</p>
<p><strong>示例：</strong></p>
<p>对于与提供的伪代码示例类似的场景，可以使用以下 CSS 规则：</p>
<pre class="brush:php;toolbar:false">img:hover + img {
  opacity: 0.3;
  color: red;
}

演示此效果的示例可以在提供的 JS Fiddle 中找到：https://jsfiddle.net/