jquery - 使用纯 css 在鼠标悬停时显示 Div 或工具提示

Question

我有这张图片，http://imgur.com/FWsgQGE .我想要的是，只要用户将鼠标悬停在灰色区域上，就会显示有关灰色区域的信息。我希望信息显示在 div 中。

是否有纯 CSS 方法来做到这一点？

Answer 1

您可以使用带有标题属性的图像映射来保存鼠标悬停工具提示。像这样:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" title="sun">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" title="mercury">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" "title="venus">
</map>

您可以使用 this page去测试。只需将标题属性添加到代码中即可。