如何在将鼠标悬停在按钮上时显示隐藏标签？

Question

我们都知道，仅在 CSS 中将鼠标悬停在按钮上时就可以更改按钮的颜色。

但是，当我将鼠标悬停在它上面时，我该怎么做才能在其中显示标签？

实际上，当我的按钮处于正常模式时，里面只有一个图标/图像。但是，当用户将鼠标悬停在按钮上时，它也会显示一个文本标签。

我知道您可以在按钮中添加一个

title

，并提供按钮功能的文本描述，但是当您将鼠标悬停在按钮上时，您可以在按钮中添加标签吗？

这是个好主意吗，还是我应该坚持使用

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: block">&nbsp;Submit</label>
</button>

我该如何实施？

注意：当按钮没有悬停时，我根本不希望为标签分配任何空间，就好像它根本不存在一样。

Answer 1

• 使用

  visibility: hidden

  防止标签占用任何空间 隐藏时有空间。
• 和

  visibility: visible

  将其悬停在按钮内部时显示 按钮。

Answer 2

你的问题有点令人困惑，但这就是你想要的吗？:

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

.btn-label {
  display: none;
}

button:hover label {
  display: block;
}