グローバルナビのテキストをhoverで切り替える方法
グローバルナビのテキストをhoverで切り替える方法
グローバルナビにマウスを重ねた時、文字を変更する方法を確認、実装してみました。
ここでは、下図のように、
↓
標準時英語表記のグローバルナビメニュー
↓
(マウスホバー)
↓
日本語表記する
という動作を実現してみました。
実現方法は、以下の通りです。
【方法】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)でテキストを変更する方法でした。
