css - 我无法在图像上制作多个可悬停点

Question

我有一张我朋友的照片，想在我将鼠标悬停在他们的脸上时弹出一些东西。我对此真的很陌生，所以它可能是一个简单的解决方案，但我找不到适合我需要的解决方案。

我设法制作了一个地图解决方案，可以正确定义他们脸部周围的区域并将其作为链接。问题是我无法使该链接在悬停时显示任何内容，只需单击即可。

<img src="http://104.45.93.236/wp-content/uploads/2019/03/20150621_195100.jpg" alt="Workplace" usemap="#workmap" width="1600" height="900">
<map name="workmap">
  <area shape="rect" coords="557,252,632,344" alt="xyz" href="http://104.45.93.236/wp-content/uploads/2019/03/stock2.jpg">
</map>

它的行为符合预期。

标签： csswordpresshtml