1. ホーム
  2. google-chrome

[解決済み] hover要素を "Inspect "する?

2022-05-10 21:10:12

質問

注意: 似たようなスレッドを読みましたが、私の問題と全く同じものはありませんでした。

要素の検査] は Chrome の非常に貴重なツールですが、多くの人がすでに持っているウィザード的な方法を学ぶために、私が最近行ったのは、ナビゲーション バーの要素にサブメニューを作成し、親項目のカーソルを置いたときに下にポップアップ表示させるというものでした。

ポップアップ (またはダウン) は、私が望むようなスタイルにはなっていないので、右クリック > で要素を検査し、何がどこから来るのかを正確に確認し、私が望む効果を達成する方法についてより良いアイデアを得ました。

しかし、マウスをメニューから遠ざけると、すぐに消えてしまいます。

そのため、検査ペインで異なる要素を選択し、同時にどの部分がハイライトされているかを確認することができません。

一度アクティブにするとメニューが表示されたままになるように変更することなく、これを回避する方法はありますか?

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

ホバーがJSによって引き起こされる場合、キーボードからスクリプトの実行を一時停止すればよい。これは ずっと 他の回答が示唆するよりも、DOMを凍結するためのシンプルな方法です。

Chrome でそれを行う方法は次のとおりです。Firefox にも同等の手順があると思います。

  1. デベロッパー ツールを開き、[ソース] に移動します。
  2. スクリプトの実行を一時停止するためのショートカットに注意してください。 F8 .

  3. UIと連動して、要素を表示させる。

  4. ヒット F8 .
  5. これで、マウスを動かしたり、DOMを調べたり、何でもできるようになりました。要素はそこにとどまります。