鼠标悬停span元素时显示另一个span功能失效，求问题排查

你的代码存在两个关键错误，导致悬停显示提示框的功能失效：

1. 选择器类名不匹配 #

HTML中提示框的类是tooltip，但CSS悬停触发规则里写的是.tooltip-for-designation，类名完全不对应，浏览器无法定位到目标元素。

2. 提示框未默认隐藏 #

.tooltip样式中没有设置默认隐藏规则，所以提示框一开始就会显示在页面上，悬停时修改display: block不会产生任何视觉变化。

修复后的完整代码 #

HTML代码

<span class="text">Click me!</span>
<span class="tooltip">HI!</span>

CSS代码

.tooltip {
    width: 120px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    text-align: center;
    border-radius: 3px;
    border: 1px solid #3e3e3e6c; /* 补充边框样式，原代码仅设置颜色不会生效 */
    box-shadow: 0px 3px 6px #00000029;
    padding: 5px;
    font-size: 16px;
    position: relative;
    top: -8px;
    left: 27px;
    white-space: nowrap;
    display: none; /* 默认隐藏提示框 */
}

.text:hover + .tooltip {
    display: inline-block; /* 用inline-block适配span行内元素特性，也可使用block */
    color: red;
    background-color: red;
}

额外说明 #

• 原代码中.tooltip仅设置了border-color，缺少border-style和border-width，所以边框不会显示，建议用border简写属性统一设置。
• 由于span是行内元素，使用inline-block作为显示状态，能避免提示框独占一行破坏布局。

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