CSS 悬停两个元素答案

【问题标题】：CSS hover two elementsCSS 悬停两个元素
【发布时间】：2021-07-12 21:06:11
【问题描述】：

我有这 3 个 div：

红色的是绝对定位的。我正在尝试在悬停时更改边框颜色。

问题在于渲染顺序有优先级（可以使用 z-index 更改）。但我想在所有悬停的元素上触发悬停效果。

在本例中 - 我希望绿色区域触发红色和蓝色悬停，悬停黄色区域触发紫色和红色悬停。

当悬停不重叠的蓝色 div 时，我只想“悬停”蓝色（红色和紫色 div 也是如此）

这可能吗？

【问题讨论】：

这是不可能的，不是没有 JavaScript。除非您可以将其中一个 div 设为容器，这意味着如果您将鼠标悬停在任何蓝色上，您也会将鼠标悬停在红色上，但这将包括蓝色和绿色。
这种方式是不可能的。你要么必须使用 js 和 canvas 并且......或者考虑为你的画中的每个梨设置单独的 div
这种方式是不可能的。你要么必须使用 js 和 canvas 并且......或者考虑为你的画中的每个梨设置单独的 div

标签： css

【解决方案1】：

您可以使用:hover 和通用兄弟选择器~ 来实现此目的。

注意：如果您希望悬停在重叠区域起作用，您需要使用 z-index 更新顺序。

解决办法：

如果你有“蓝色”、“红色”和“紫色”类，你可以根据:hover伪类更新边框并选择它的兄弟类


.blue:hover, .blue:hover ~ .red {
  outline: 1px solid blue;
}

解决方案的完整代码已共享here

【讨论】：