簡単!Chromeデベロッパーツールでマウスオーバー(ホバー)の状態を調べる方法。


ホームページの変更や修正をするときに、
Chromeのデベロッパーツールを使う方も多いと思います。
私もいつも使っていますが、
マウスオーバーをした時のスタイルなどを調べるのってどうしていますか。
意外に知られていない使い方なんですが、いざというときに知らなければ修正に時間がかかります。
知っているとむちゃくちゃ簡単なので、紹介します。

弊社のサイトでは上のグローバルナビにマウスを合わせるとこのようにサブメニューが現れます。
マウスオーバーメニュー
マウスをグローバルナビから離すとサブメニューが消えてしまうので、
デベロッパーツールでこのサブメニューの状態を確認することができません。
マウスオーバーデベロッパーツール

さて、こんな時は「デベロッパーツール」の「:hov」という部分を使います。
デベロッパーツール :hov

まずは、マウスオーバーさせる要素を選択します。
マウスオーバーデベロッパーツール
すると、デベロッパーツールのウィンドウにはその要素の属性が現れますね。
ここまでは通常の使い方です。
そこで、先ほどの「:hov」という部分をクリックしてください。
すると、それぞれの状態の選択欄が出てくるので、調べたい状態のチェックボックスをクリックします。
要素の状態
これで、要素が疑似的にマウスオーバーされた状態となるので、
次のように、サブメニューを選択できます。
マウスオーバーデベロッパーツール
そのまま選択したサブメニューの属性の確認はもちろん、そのまま編集できます。
マウスオーバーデベロッパーツール

デベロッパーツールは使いこなすと本当に便利なので、
この使い方も知っておきましょう。