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

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

问题：

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

答案：

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

后代元素：

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

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

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

<div>

相邻兄弟：

对于与触发元素相邻的兄弟元素，需要采用不同的方法：

#first_sibling:hover + #second_sibling {
  opacity: 0.3;
}

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

<div>

限制：

在这两种情况下，需要注意的是，选择器中指定的后一个元素是悬停时受影响的元素.

示例：

对于与提供的伪代码示例类似的场景，可以使用以下 CSS 规则：

img:hover + img {
  opacity: 0.3;
  color: red;
}

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

以上是当鼠标悬停在另一个元素上时，CSS 可以单独设置一个元素的样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！