これはですねー いつも忘れるので書いておきます!
<a>とか<button>とか、:hover というのでマウスオーバーしたときだけスタイルを変更する、とかCSSでやりますよね?
しかし、そのスタイルが微妙だったりするときに、普通の要素だったら右クリックした開発者コンソールに行けばすぐ解決しますが、マウスオーバーしたときのスタイルを検証しようと思っても、開発者コンソールにマウスを持っていくとマウスオーバーしたときのスタイル見えないじゃん!
:hover のスタイルがわかんないじゃん!
ということになります。
そんな時は、Chromeの開発者コンソールでは、要素からのスタイルパネルの「フィルタ」という入力欄の右の
:hov
というところをクリックしてみましょう。
下記の画像の赤丸で囲んだところです。
左で選択した要素を、強制的に :hover 状態にしたり、 :active状態にしたりできます!
ありがたや~。
ちなみに、この:hover とかは「疑似クラス」と呼びます。