Chrome DevTools で :hover スタイルを表示および操作するにはどうすればよいですか?

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

要素の状態を選択するための専用のスタイル ドロップダウンを提供する Firebug とは異なり、Chrome デベロッパー ツールは次のことを提供します。もっと巧妙な مشاهده:hover メソッドstyles.

解決策:

:hover ルールにアクセスしてその状態を操作するには:

1. 擬似クラス表示を有効にする: スタイル ペインの右上にある小さな「:hov」テキストをクリックします。これにより、通常の CSS ルールと一緒に :hover ルールが表示されます。
2. Force :hover State: [要素] パネルで目的の要素を右クリックし、コンテキスト メニューから [:hover] を選択します。 。これにより、要素が強制的にホバー状態になり、適用されたスタイルを検査できるようになります。

追加のヒント:

• その他のキーボード ショートカットと[要素] パネルの機能については、Chrome デベロッパー ツールのショートカットのドキュメントを参照してください。
• 代わりに、Chrome を使用することもできます。異なる要素の状態を素早く切り替えるための拡張機能「Toggle Element State」

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