如何通过CSS实现:hover触发时为另一元素应用对应样式

CSS实现子元素悬停修改父元素样式方案 #

你需要的效果可以通过CSS :has() 伪类实现，该特性已在所有主流现代浏览器得到支持：

示例代码 #

<body>
    <p>Click me</p>
</body>

/* 当body包含处于悬停状态的p元素时，触发body的样式 */
body:has(p:hover) {
    background-color: red;
}

旧浏览器兼容方案 #

如果需要适配不支持:has()的低版本浏览器，可以通过伪元素模拟背景实现，注意调整页面其他内容的层级避免被伪元素遮挡：

p {
  position: relative;
  z-index: 2;
}
/* 用悬停时生成的全屏伪元素模拟body背景 */
p:hover::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: red;
  z-index: 1;
}

内容的提问来源于stack exchange，提问作者Tobias H.