Chrome DevTools で :hover 状態を検査するにはどうすればよいですか?

Chrome デベロッパー ツールで :hover 状態を検査する

Web 開発では、:hover 状態を含むさまざまな状態の要素のスタイルを検査することが必要になることがよくあります。 Firebug にはさまざまな状態を選択するための便利なスタイル ドロップダウンが用意されていますが、Chrome デベロッパー ツールにはこの点が欠けているように見えるかもしれません。

非表示の :hover 状態オプションを明らかにする

しかし、Chrome デベロッパー ツールには実際に以下の機能が提供されています。 :hover 状態を表示および操作します。これらのオプションにアクセスするには:

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

Forcing :hover State

さらに、検査を容易にするために、要素を強制的に :hover 状態にすることもできます。

• 要素パネルで要素を右クリックします。
• 選択コンテキストメニューから「:hover」を選択します。これにより、要素に :hover スタイルが一時的に適用されます。

要素パネルの使用に関するヒント

• デフォルトの状態に戻すには、「:default」をクリックするだけです。
• 要素パネルの操作の詳細については、Chrome デベロッパー ツールを参照してください。ショートカット。

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