仅用CSS如何通过hover单个选择器修改全页指定元素/类的样式

解决方案 #

有完全不需要JS的纯CSS实现方案，目前最灵活的实现方式是使用CSS新增的:has()伪类选择器，不受元素层级关系限制。

你需要的效果可以直接用以下代码实现，假设你要hover的特定选择器类名为.hover-trigger，要覆盖所有<p>的display:none属性：

/* 只要body内存在处于hover状态的.hover-trigger元素，就给所有p元素应用样式 */
body:has(.hover-trigger:hover) p {
  display: block !important;
}

逻辑说明 #

body:has(.hover-trigger:hover)会匹配包含了正在被hover的.hover-trigger元素的body节点，后续的p选择器就可以命中body下的所有p元素，完全不需要考虑p和触发元素是后代、兄弟还是其他嵌套关系，全页面的p都会生效。

兼容说明 #

• 主流浏览器的新版本都已经支持:has()：Chrome 105+、Firefox 121+、Safari 15.4+，覆盖了90%以上的全球用户场景。
• 如果需要兼容不支持:has()的旧版浏览器，可以将hover触发元素放在body下的最靠前位置，用通用兄弟选择器实现，限制是触发元素必须在所有需要控制的元素的同级前置位置，代码示例：

.hover-trigger:hover ~ * p,
.hover-trigger:hover ~ p {
  display: block !important;
}

内容的提问来源于stack exchange，提问作者prigolor