为什么这类HTML结构中CSS的:hover伪类选择器无法生效？

问题原因 #

你当前的:hover效果失效是由两个问题共同导致的：

• 第一，CSS代码中存在多余的冗余星号，不符合CSS语法规范，建议先清理为合法写法：

/* 清理掉类名前后多余的星号 */
.bar {
    display: none;
}

• 第二，选择器逻辑不符合你的HTML结构：你写的.trip:hover .bar属于后代选择器，仅能匹配.trip元素内部嵌套的.bar子元素，但你现有HTML结构里.bar是.trip的同级兄弟元素，所以该选择器无法命中目标元素。

修复方案 #

针对你现有的相邻兄弟结构，将hover规则的选择器替换为相邻兄弟选择器+即可：

.trip:hover + .bar {
    display: block;
}

如果后续.bar不是紧挨着.trip的第一个兄弟元素，可改用通用兄弟选择器~匹配所有后续同级的.bar元素：

.trip:hover ~ .bar {
    display: block;
}

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