我有这张图片,http://imgur.com/FWsgQGE。我想要的是,每当用户悬停在他们身上时,都会显示有关灰色区域的信息。我希望信息在div中显示。使用纯CSS显示鼠标悬停的div或工具提示
有没有一种纯CSS的方式来做到这一点?
我有这张图片,http://imgur.com/FWsgQGE。我想要的是,每当用户悬停在他们身上时,都会显示有关灰色区域的信息。我希望信息在div中显示。使用纯CSS显示鼠标悬停的div或工具提示
有没有一种纯CSS的方式来做到这一点?
您可以使用带有标题属性的图像映射来保存鼠标悬停工具提示。 像这样:
<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测试。只需将标题属性添加到代码中即可。
但我喜欢在div中显示信息。 – user1601973
然后你需要javascript才能做到这一点。 –
您可以在这里查看jQuery UI的工具提示示例:http://jqueryui.com/tooltip/ –
你可以在Photoshop中切片图像并指定每个部分 –
那么你最终做了什么? –