Chrome DevTools で :hover スタイルを検査するにはどうすればよいですか?

Chrome デベロッパー ツールで :hover スタイルを検査する

Chrome で要素のスタイルを検査するときに、適用されているスタイルを表示することができます。要素が :hover 状態にあるとき。要素の状態を選択するための便利なドロップダウンを提供する Firebug とは異なり、Chrome のデベロッパー ツールにはこの機能が欠けているように見えるかもしれません。

隠れ家を見つける

心配しないでください。 Chrome デベロッパー ツールでは、確かに :hover スタイルを検査できます。

これらのスタイルにアクセスするには、Chrome デベロッパー ツールの [Elements] パネルに移動し、右上隅に表示される小さな「:hov」テキストをクリックします。スタイルペインのこれにより、:hover を含む疑似クラス ルールの表示が切り替わります。

ホバー状態の強制

さらに、要素を :hover に強制することもできます。検査しやすい状態にします。要素を右クリックし、コンテキスト メニューから「:hover」を選択します。これにより、:hover スタイルが要素に適用され、その効果を確認できるようになります。

gt;追加リソース

Chrome デベロッパーの要素パネルの詳細については、こちらをご覧ください。ツールについては、ショートカットに関する包括的なガイドを参照してください。

以上がChrome DevTools で :hover スタイルを検査するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。