ツールチップ付きのメニュー(2)

説明補足説明コード分割コードコメント投稿

このサンプルは、メニューにマウスを移動するとカーソルの右側にツールチップを表示します。

このサンプルは、メニューにマウスを移動するとカーソルの右側にツールチップを表示します。

ツールチップは<span>タグに格納して表示します。マウスをメニューに移動したときにツールチップを可視/不可視に切り替えるには、onmouseover、onmouseoutイベントハンドラを使用します。ここでは、<a>タグにこれらのイベントハンドラを登録しています。 ツールチップを可視/不可視に切り替えるには、CSSのvisibiltyプロパティに「visible」、「hidden」を設定します。 

var anchorList = document.getElementsByTagName("a");
for(var i=0; i<anchorList.length;i++) {
  anchorList[i].onmouseover = show;
  anchorList[i].onmouseout = hide;
}