使用純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測試。只需將標題屬性添加到代碼中即可。