My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

グローバルナビのテキストをhoverで切り替える方法

f:id:sntkk3:20171001210317j:plain

グローバルナビのテキストをhoverで切り替える方法

グローバルナビにマウスを重ねた時、文字を変更する方法を確認、実装してみました。

ここでは、下図のように、

f:id:sntkk3:20171001113942p:plain
          ↓
f:id:sntkk3:20171001114031p:plain


標準時英語表記のグローバルナビメニュー
  ↓
(マウスホバー)
  ↓
日本語表記する

という動作を実現してみました。


実現方法は、以下の通りです。

【方法】onMouseOverでメニューのテキストを変更する

[コード例]

<li class="mission_statement"><a href="#" data-nav-section="mission_statement"><span class="en" onMouseOver="this.innerText='ミッション'" onMouseOut="this.innerText='Mission Statement'">Mission Statement</span></a></li>


[補足]
CSS調整用に英語表記と日本語表記のそれぞれにクラス名を付けています。
マウスが重なった時のみ表記される日本語テキストをonMouseOverで指定、マウスが離れると表記される英語メニューをonMouseOutで指定しています。


以上、マウスオーバー(hover)でテキストを変更する方法でした。