CSS hover控制兄弟元素:after伪元素样式失效原因及解决方案

首先明确：#btn1:hover ~ #btn2:after 这个选择器的语法、匹配逻辑本身完全合法，不存在“无法控制伪元素”的规则限制，样式不生效基本是以下几个常见原因导致的，和选择器本身无关：

• 伪元素未满足渲染前提：:after（标准写法为::after，单冒号是兼容旧浏览器的旧语法）伪元素要在页面中生成渲染，必须设置content属性，哪怕值为空字符串也可以。如果只在hover触发的样式块里给伪元素设置visibility，没有在基础样式里给伪元素定义content，浏览器根本不会生成这个伪元素，自然看不到任何效果。
• 属性取值不合理：visibility: initial 表示把属性重置为CSS规范定义的初始值，visibility的初始值确实是visible，但如果存在样式继承、父元素属性影响的场景，直接写visible比initial的兼容性和可控性高很多，能避免不同环境下解析差异导致的不生效。
• 样式优先级不足：如果基础状态下给#btn2:after设置visibility: hidden的选择器权重，高于hover触发的选择器权重，那hover时的样式会被覆盖，无法生效。
• 父元素未渲染：如果#btn2本身被设置了display: none，它的所有子元素、伪元素都会被连带不渲染，不管给伪元素设置什么visibility属性都不会显示。

纯CSS修复方案 #

不需要调整选择器逻辑，只要补全伪元素的基础样式、修正属性值即可正常生效，参考代码：

/* 先初始化伪元素基础样式，必须设置content */
#btn2:after {
  content: "这里替换成你要显示的伪元素内容"; /* 不需要文字内容就设为content: "" */
  visibility: hidden; /* 默认隐藏 */
  /* 按需添加自定义样式，比如做提示框时常用的绝对定位、背景色等 */
}

/* 原有选择器逻辑不需要修改，直接设置visible即可 */
#btn1:hover ~ #btn2:after {
  visibility: visible;
}

要注意两个前提：一是确保#btn1和#btn2是同一个父元素下的兄弟元素，且#btn2在#btn1的DOM顺序后面（通用兄弟选择器~只能匹配后面的兄弟元素）；二是如果给#btn2本身设置了visibility: hidden，伪元素需要显式设置visibility: visible才会显示，因为visibility属性默认会继承父元素的值。

JS辅助方案（兼容性最好） #

如果DOM结构不满足兄弟选择器的匹配要求，或者需要更复杂的联动逻辑，可以用几行JS做辅助，通过类名控制状态，完全不用纠结选择器优先级问题：

#btn2:after {
  content: "伪元素内容";
  visibility: hidden;
}
/* 类名控制伪元素显隐 */
#btn2.hover-active:after {
  visibility: visible;
}

const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
btn1.addEventListener('mouseenter', () => {
  btn2.classList.add('hover-active');
});
btn1.addEventListener('mouseleave', () => {
  btn2.classList.remove('hover-active');
});

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