Google Chromeデベロッパーツールでa:hoverの動作を確認する方法

結論

Stylesタブの:hovボタンからForce element stateを表示し、:hoverにチェックを入れると確認できます。

補足

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

関連記事

  1. ワクチン接種予約サイトに全く繋がらないのでサイトの素性を調べてみた

カテゴリ

アーカイブ