ホバー要素を「検査」しますか？

注：私は同様のスレッドを読みましたが、まったく問題はありません。それを右クリックすると、すぐに消えます。

「要素の検査」はChromeの非常に貴重なツールですが、多くの皆さんがすでに持っている魔法のような方法を知った私の最新の進出は、ナビゲーションバーにある要素のサブメニューを作成するのを見たところです。親アイテム。

ポップアップ（またはダウン）のスタイルが適切ではないため、右クリックして>要素を検査して、正確にどこから来ているのかを確認し、目的の効果を達成するためのより良いアイデアを得ます。

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

そのため、検査ペインで別の要素を選択して、どの領域が同時に強調表示されているかを確認することはできません。

これを回避する方法はありますか？メニューを変更せずに、アクティブ化されると「ポップアップ」状態を維持しますか？

hover効果がCSSyesで与えられる場合、私は通常これを取得するために2つのオプションを使用します。

1つは、マウスがを離れseeたhover effectときhover areaです：
ドッキングウィンドウでインスペクターを開き、幅がに達するまで増やしHTML element、次に右クリックしてポップアップメニューをインスペクターゾーンの上に置く必要があります。次に、マウスをインスペクタービューの上に移動します。 、hover effectドキュメントでアクティブ化されたキープ。

2つの、マウスが上にない場合でも、インスペクタを開き、に行くと言う右上のアイコンでクリックし、手動であり活性化させることができます...（矢印と点線の矩形）と（特に）チェックボックスが提供されています。keephover effectHTML elementStyles TABToggle Element StateHover Event

全然わからない場合はお知らせください。スクリーンショットをいくつか追加いたします。 編集：スクリーンショットを追加。

そして最後に、私は初めで言うようならば、私はこれを行うことができるようhoverに設定されているCSS:HOVER...あなたがコントロールするときhover stateにjQuery.onMouseOver例えば、唯一の方法の一つ、（時々 ）働きます。

それが役に立てば幸い。

ホバーがJSによってトリガーされた場合は、キーボードからスクリプトの実行を一時停止します。これは、他の回答が示すよりもはるかに簡単なDOMのフリーズ方法です。

Chromeでの操作方法は次のとおりです。Firefoxにも同等の手順があると思います。

1. 開発者ツールを開き、ソースに移動します。

2. スクリプトの実行を一時停止するショートカットに注意してください— F8。

   

3. UIを操作して、要素を表示します。

4. ヒットF8。
5. これで、マウスを動かしたり、DOMを検査したりできます。要素はそのまま残ります。

私のために働いたのは、調べてこれを実行したい特定のタグを選択することです：

上記を行った後、通常はタグを再度選択します。その後、要素の検査などの他の場所にマウスを置いても、ドロップダウンは自動的に現状のままになります。

メニューのドロップダウン要素を調べて通常の状態に戻るときに、ブラウザを更新するだけです。

お役に立てれば。:)

これは、JavaScriptコンソールでも実行できます。

$('#foo').trigger('mouseover');

「ホバー」状態の要素を「フリーズ」する。

CSSを変更したり、ChromeでJSを一時停止したりする方法を次に示します（Macを使用していて、Winで実行している場合、目の前にPCがありません）。

1. 開発者コンソールを開いておきます。
2. まだホバー検査ツールを有効にしないでください。代わりに、マウスをその上に移動して目的のサブメニューを開きます。
3. ヒットCommand+ Shift+ C（Mac）またはCtrl+ Shift+ C（勝利/ Linuxの）

これで、ホバー検査ツールがサブナビゲーションで開いた要素に適用されます。

以前のブラウザリビジョンに存在していたかどうかはわかりませんが、この非常にシンプルな方法を見つけました。

chromeまたはFirefoxでインスペクターを開き、目的の要素を右クリックして、適切なオプション（この場合はホバー）を選択します。これにより、関連するCSSがトリガーされます。

Firefox 55とchromium 61のスクリーンショット。

素晴らしいもの！

そのアドバイスをくれたgmoに感謝します。これらの属性設定が非常に役立つことを知りませんでした。

言い回しの小さな改訂として、そのプロセスを次のように説明します。

• スタイルを設定する要素を右クリックします

  • 「検査」ツールを開く

  • 右側で、小さな[スタイル]タブに移動します

  • CSSスタイルシートのコンテンツの上に見つかりました

  • .hovオプションを選択します-これにより、選択したHTML要素で使用できるすべての設定が表示されます

  • すべてのオプションをクリックして変更し、非アクティブにします

  • 次に、微調整したい状態を選択します-これらのいずれかをアクティブにすると、スタイルシートがそれらの設定に直接ジャンプします。

スタイル-フィルターの調整-インタラクティブな要素

この情報は私にとって命の恩人でした。私はそれについて聞いたばかりだとは信じられません！

CSSを変更して、メニューを非表示にするプロパティが作業中に適用されないようにします。

これを行う必要がありましたが、検査しようとした要素は、別の要素のホバー状態に基づいて動的に追加および削除されました。私の解決策はこれと似ていますが、それでもうまくいきませんでした。

だからここに私がやったことがあります：

1. mouseover気になるホバーイベントをトリガーする要素でデバッガモードに入る簡単なスクリプトを追加します。

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. 次に、Chromeで開発コンソールを開き、要素にカーソルを合わせると、デバッガーモードに入ります。開発ツールのソースセクションに移動し、[スクリプトの実行を再開]ボタン（下の青いプレイのようなボタン）をクリックします。

これを行うと、ホバー状態でDOMが一時停止し、要素インスペクターを使用して、その状態で存在するすべての要素を検査できます。