如何使用 :hover 操作单独类的 CSS？

使用 :hover 操作单独类的 CSS

在 CSS 中使用多个类时，可能需要修改一个类基于另一个元素的悬停状态。虽然使用像 .item:hover .wrapper 这样的嵌套选择器似乎很直观，但这并不是直接可行的。

但是，有两种可行的方法可以实现此效果：

• 兄弟和子关系：如果目标元素（包装器）是悬停元素（项目）的子元素或直接兄弟元素，则可以使用〜（兄弟）或（直接兄弟）选择器。例如：

.item:hover + .wrapper {
  background-color: red;
}

• 后代关系： 如果目标元素是悬停元素的后代，您可以使用 > .item:hover 规则中的（后代）选择器。例如：

.item:hover > .child > .wrapper {
  color: black;
}

请记住，当目标元素是 HTML 结构中的同级元素或后代元素时，这些方法非常有效。对于 DOM 中不直接相关的元素，您可能需要考虑替代解决方案，例如 JavaScript。

以上是如何使用 :hover 操作单独类的 CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！