鼠标悬停绿色圆点时隐藏元素不显示的CSS问题求助

核心原因 #

你的CSS选择器逻辑错误。.road1:hover .road1k是后代选择器，仅当.road1k是.road1的直接/间接子元素时才会生效，但从你的网站DOM结构来看，这两个元素是同级关系，所以该选择器无法触发气泡显示。

针对性解决方案 #

根据DOM结构的不同，选择对应的兄弟选择器：

情况1：.road1k是.road1的紧邻同级元素 #

修改为相邻兄弟选择器+：

.road1 { 
    display: block;
}

.road1k {
    display: none;
}

.road1:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); /* 补充标准属性，兼容更多浏览器 */
}

/* 替换原后代选择器为相邻兄弟选择器 */
.road1:hover + .road1k {
    display: block;
}

情况2：.road1k是.road1的非紧邻同级元素 #

使用通用兄弟选择器~：

.road1:hover ~ .road1k {
    display: block;
}

额外提示 #

• 尽量不要用!important，它会打乱CSS优先级规则，增加后续维护成本。
• 如果.road1k在.road1之前，CSS选择器无法直接实现悬停显示，需要调整DOM顺序或用JavaScript辅助。

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