結論
Styles
タブの:hov
ボタンからForce element stateを表示し、:hover
にチェックを入れると確認できます。
補足
Google Chrome デベロッパーツールは、Webページの分析を行う上でかかせないツールです。
弊社では主にCSSのデザイン設計で頻繁に活用しています。
確認したいエレメント(ボタンやフォームなど)に調査対象を設定すると、そのエレメントに関する情報がすぐに確認できます。
ただ、:hoverの動きについては、単純には確認することができないため、やり方を知っておく必要があります。
:hover
以外にも、:active
や:visited
などのステートも、今回ご紹介した方法で確認することができますので、ご活用ください。