Chromeのデベロッパーツールでhover時の確認をする方法

実は色々とできたデベロッパーツール

サイトを作っててマージンやサイズ等を確認したりする時に、よくchromeのデベロッパーツールを使っています。
今まで感覚で使っていたのですが、結構色々と機能が充実していることを最近知りました。
 

特にマウスオーバー時の確認の仕方です。
いつも、マウスを乗せた状態で右クリックして「要素の検証」を押しつつマウスをウィンドウ上からフェードアウトさせるという、変な手法でやっていました。
 

こんな感じです。

原因は分からないのですが、最近この手法の成功率が下がってきたので調べていたところ、デベロッパーツールでできるということをしりました。
 

やり方は、対象のhtml要素を選択する>右上の真ん中のアイコンをクリック>:hoverにチェック
 
すると、その要素に:hoverがついた状態を表示することができます。
 

こんな感じです。

今後はこの方法にてマウスオーバー時のcssを確認したいと思います。
 
ただしjavaScriptで直接色を指定している場合はこのやり方では確認できないので、最初の変なやり方が無難なのではないかと思います。