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

我一直在做一个导航器，只有图片，但我也需要文字，但没有地方放文字。所以我想要的是，当用户悬停在图像上时，一个新的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>

---

考虑属性。

最好的方法是这样：

<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>

---

尝试以下操作：在每个

标记后添加

元素：

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

请参阅

a {
  display:inline-block;
}

img {  
  border: 1px solid #aaa;  
}  

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

a:hover .popup {
  visibility: visible;
}