如何在hover同级a标签时修改.tricky元素的:before、:after伪元素样式

失效原因 #

CSS 中的兄弟选择器（+/~）只能匹配同一父元素下、位于当前元素之后的同级节点。你的 <a> 标签嵌套在 <h2> 内部，它的同级节点只有同属该 <h2> 下的元素，自然无法直接选中外层的 .tricky 容器，所以原有写法不生效。

可行实现方案 #

利用「hover 子元素时会同步触发父元素的 hover 状态」的特性，通过包含 <a> 的父级 <h2> 做中转，再用兄弟选择器选中后续的 .tricky 及其伪元素即可：

/* 可选优化：只在hover a时才触发效果，避免hover h2空白区域误触发 */
.content h2:first-child {
  pointer-events: none;
}
.content h2:first-child a {
  pointer-events: auto;
}

/* hover a时修改.tricky本身样式 */
.content h2:first-child:hover ~ .tricky {
  visibility: visible;
  /* 其他自定义样式：宽高、颜色等 */
  background: #000;
  width: 120px;
  height: 120px;
}

/* hover a时单独修改.tricky::before样式 */
.content h2:first-child:hover ~ .tricky::before {
  visibility: visible;
  /* 其他自定义样式 */
  background: orange;
  width: 50px;
}

/* hover a时单独修改.tricky::after样式 */
.content h2:first-child:hover ~ .tricky::after {
  visibility: visible;
  /* 其他自定义样式 */
  background: purple;
}

把上述代码替换你原有的 #ida:hover ~ .tricky::after 相关规则即可正常生效。

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