Question

我一直在制作只有图片的导航器，但我也需要文字，但是没有地方可以放置文字。所以我想要的是，当用户将图像悬停在一个新的div上以显示文本时。

代码：

<a href="../profile.php">
  <img src="../img/profile.png" style="border: gray 1px solid; margin-left: 0px; width: 45px;" />
</a>
<a href="../shop.php">
  <img src="../img/shop.png" style="border: gray 1px solid; margin-left: 10px; width: 45px;" />
</a>
<a href="../settings.php">
  <img src="../img/indstillinger.png" style="border: gray 1px solid; margin-left: 10px; width: 45px;" />
</a>
<a href="../casino.php">
  <img src="../img/casino.png" style="border: gray 1px solid; margin-left: 10px; width: 45px;" />
</a>

Answer 1

考虑title="my tooltip"属性。

Answer 2

最好的方法就是这样：

<a href="../profile.php"><img src="../img/profile.png" title="Here comes hover text" style="border: gray 1px solid; margin-left: 0px; width: 45px;"/></a>

Answer 3

试试这个：在每个<p>代码后添加<img>元素：

<p class="popup">Caption goes here</p>

然后使用 CSS visibility属性，您可以显示/隐藏字幕：

a {
  display:inline-block;
}

img {  
  border: 1px solid #aaa;  
}  

.popup {
  visibility: hidden;
  text-align: center;
}

a:hover .popup {
  visibility: visible;
}

查看 Example 。

将鼠标悬停在div上，查看文本

3 个答案: