如何用CSS实现鼠标悬停指定元素时显示另一段文本

问题原因&对应解决方法 #

• CSS语法错误：你提供的.dot-mada样式代码末尾缺失闭合大括号}，语法错误会导致后续定义的.dot-mada:hover + .text-mada规则直接失效，先补全大括号：

.dot-mada {
    position: relative;
    text-align: center;
    font-size: 50px;
    left: 52px;
    bottom: 44px;
}

• 相邻兄弟选择器匹配限制：你用的+是相邻兄弟选择器，要求.text-mada必须是.dot-mada的直接相邻的下一个同级元素，DOM结构必须和下方示例一致才能匹配成功：

<!-- 正确结构示例 -->
<span class="dot-mada">●</span>
<div class="text-mada">悬停显示的文本内容</div>

如果两个元素中间隔了其他同级节点，或者.text-mada不是紧跟在.dot-mada后面，把选择器换成通用兄弟选择器~即可：

/* 修改后的hover规则，支持匹配所有后续同级的.text-mada */
.dot-mada:hover ~ .text-mada {display: block}

• 元素定位导致不可见：你给.text-mada设置了left:760px、bottom:750px的相对定位，数值过大很可能导致元素渲染到可视区域外，就算display生效你也看不到。可以先临时注释这两个定位属性，确认hover逻辑生效后再调整定位数值到合适位置。
• 元素被遮挡导致hover失效：如果.dot-mada被其他层级更高的元素覆盖，你实际鼠标操作并没有触发它的hover事件。可以给.dot-mada临时加background: red;z-index:999;属性测试，确认元素可被正常hover后再删除临时样式即可。

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