如何实现鼠标悬停按钮时显示隐藏的label标签？

我们都知道只用CSS就能实现按钮悬停变色，但如果想实现「按钮默认只显示图标，悬停时显示旁边的文本标签」该怎么做？

我知道可以给按钮加title属性做功能提示，但能不能直接让按钮内的label标签在悬停时显示出来？

这么做合适，还是直接用title属性更好？

示例状态 #

正常状态（仅显示图标）：

<button>
    <img src="./images/iconok.png" alt="Submit" />
    <label style="display: none">&nbsp;Submit</label>
</button>

悬停状态（图标+文本同行显示）：

<button>
    <img src="./images/iconok.png" alt="Submit" />
    <label style="display: inline-block">&nbsp;Submit</label>
</button>

注意：未悬停时，label不能占任何空间，要像不存在一样。

编辑说明：最初我给label设了display: block，导致文本在图标下方，后来改成display: inline-block才能让文本和图标并排。

实现方法 #

用纯CSS就能搞定，不需要JS：

1. 先把内联样式移除，改用CSS类来控制（顺便把label换成span，因为label是用来关联表单控件的，按钮里的文本用span语义更准确）：

<button class="icon-button">
    <img src="./images/iconok.png" alt="Submit" />
    <span class="button-label">&nbsp;Submit</span>
</button>

2. 写对应的CSS：

/* 默认隐藏文本，不占空间 */
.icon-button .button-label {
    display: none;
}

/* 悬停时显示文本，和图标并排 */
.icon-button:hover .button-label {
    display: inline-block;
}

/* 可选：支持键盘聚焦时也显示文本，照顾键盘操作用户 */
.icon-button:focus .button-label {
    display: inline-block;
}

display: none的元素不会占据文档流空间，完美符合“未悬停时仿佛不存在”的要求。

两种方案的对比 #

悬停显示文本标签的优势 #

• 视觉反馈更即时：不用像title那样等几秒才弹出提示，鼠标一放上去就看到文字
• 样式可定制：可以自己调整文本的颜色、字号、间距，和网站风格统一，比默认的title提示框更美观
• 兼容性更好：支持键盘用户，用Tab聚焦按钮时也能看到文本，比title更友好

title属性的优势 #

• 实现成本极低：不用写额外CSS，加个属性就行
• 不改变按钮布局：按钮始终保持小尺寸，适合空间紧张的区域
• 原生兼容：所有浏览器和屏幕阅读器都支持，不用考虑适配问题

怎么选？ #

如果界面有足够空间，且希望用户能快速清晰地了解按钮功能，选悬停显示文本的方案；如果按钮区域空间有限，或者只需要简单的辅助提示，用title就够。

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