Chrome 開発者コンソールでマウスオーバーしたときや、クリックしたときのスタイルを検証したいけどマウスを離すと検証できないを解決する

これはですねー  いつも忘れるので書いておきます!

<a>とか<button>とか、:hover というのでマウスオーバーしたときだけスタイルを変更する、とかCSSでやりますよね?

しかし、そのスタイルが微妙だったりするときに、普通の要素だったら右クリックした開発者コンソールに行けばすぐ解決しますが、マウスオーバーしたときのスタイルを検証しようと思っても、開発者コンソールにマウスを持っていくとマウスオーバーしたときのスタイル見えないじゃん!
:hover のスタイルがわかんないじゃん!

ということになります。

そんな時は、Chromeの開発者コンソールでは、要素からのスタイルパネルの「フィルタ」という入力欄の右の

:hov

というところをクリックしてみましょう。

 下記の画像の赤丸で囲んだところです。

左で選択した要素を、強制的に :hover 状態にしたり、 :active状態にしたりできます!
ありがたや~。

ちなみに、この:hover とかは「疑似クラス」と呼びます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です