CSS ホバー状態を持つ HTML 要素があります。ホバー時のマージンまたはパディングにバグがあり、マウスオーバーするたびに要素の内容が少しスライドし、面倒です。
FireBug または Chrome Dev Tools を使用してデバッグしたいのですが、これらのツールで発生した一般的な問題は、Firebug/devtools から要素を選択した後、明らかにマウスを開発ツールとホバーに戻す必要があることです。状態は有効ではなくなりました。
ホバー状態の要素でこれらのツールを使用して HTML 要素を検査/デバッグするにはどうすればよいですか?
Chrome Dev Tools には、Elements > Styles パネルに :hover ステート セレクターが組み込まれています。そこで他の疑似クラス (:active など) を切り替えることもできます。
これは、firebug のスクリーン ショットと、agriboz のコメントを表示するのに十分なほど鮮明でない (私のような) ものです。
これで、疑似クラス スタイル ルールを確認し、それらを要素に強制することができます。
スタイル ペインで :hover などのルールを表示するには、右上にある小さな点線のボックス ボタンをクリックします。
要素を強制的に :hover 状態にするには、要素を右クリックします。
または、[スクリプト] パネルの [イベント リスナー ブレークポイント] サイドバー ペインを使用して、マウスオーバー ハンドラーでの一時停止を選択することもできます。
