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>

このページを使用してテストできます。title 属性をコードに追加するだけです。