1. ホーム
  2. css

[解決済み] クロームウェブインスペクターでホバーコードを表示する方法

2022-11-04 12:24:04

質問

クロームウェブインスペクタでコードを表示するのはとても便利です。しかし、例えばボタンのホバーコードはどのように表示するのでしょうか。ボタンの上にマウスを置く必要があり、したがって、インスペクタでそれ(マウス)を使用することはできません。インスペクタでこれを実現するためのショートカットや他の方法はあるのでしょうか?

どのように解決するのですか?

これで、擬似クラスのスタイルルールの両方が表示され、要素にそれらを強制することができるようになりました。

のようなルールを見るために :hover のようなルールを表示するには、スタイルペインで右上の小さな点線ボックスボタンをクリックします。

要素を強制的に :hover の状態にするには、その要素を右クリックします。

または、スクリプトパネルのイベント リスナー ブレークポイント サイドバー ペインを使用し、マウスオーバー ハンドラで一時停止するように選択することもできます。