148

注: 同様のスレッドを読んだことがありますが、私の問題ではありません。問題なく右クリックできますが、すぐに消えます。

「Inspect Element」は Chrome の非常に貴重なツールだと思いますが、最近の試みでは、多くの人がすでに持っている魔法のような方法を学び、ナビゲーション バーに要素のサブメニューを作成しました。親アイテム。

ポップアップ (またはダウン) のスタイルが思いどおりにならないので、右クリック > 要素を検査して、何がどこから来ているのかを正確に確認し、目的の効果を実現する方法をよりよく理解します。

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

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

メニューを変更せずに、一度アクティブにすると「ポップアップ」したままにする方法はありますか?

4

13 に答える 13

244

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

Chrome での方法は次のとおりです。Firefoxにも同等の手順があると確信しています：

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

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

    スクリプトの実行を一時停止

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

  4. ヒットF8。
  5. これで、マウスを動かしたり、DOM を調べたりすることができます。要素はそこにとどまります。
于 2016-08-05T07:08:06.180 に答える
82

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

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

ここに画像の説明を入力

マウスが上になくてもkeep、インスペクターを開き、右上のアイコンに移動してクリックします...（矢印の付いた点線の長方形）そこで（とりわけ）を手動でアクティブ化できますチェックボックスが提供されます。hover effectHTML elementStyles TABToggle Element StateHover Event

ここに画像の説明を入力

まったく明確でない場合はお知らせください。いくつかのスクリーンショットを追加できます。 編集: スクリーンショットを追加しました。

そして最後に、最初に言ったように、これを行うことができるのは、hoverが で設定されているCSS:HOVER場合のみです。hover statejQuery.onMouseOver

それが役に立てば幸い。

于 2013-07-11T20:44:54.147 に答える
14

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

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

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

于 2016-02-03T21:51:42.713 に答える
3

何らかの理由でスクリプトの一時停止に問題がある場合、これを行う非常に簡単な方法を見つけました。

  1. 「検査」タブで開発ツールを開きます。
  2. ホバーしてポップアップを表示します。
  3. ポップアップで目的の要素を右クリックし、'Q' (Firefox の場合) を押してその要素を調べます。
  4. キーボードを使用してナビゲートします:
    • 上下矢印: 要素間を移動
    • 左/右矢印: 折りたたむ/展開する
    • Tab/Shift+Tab: インスペクターと CSS ルールの間、および CSS ルール内を移動します
    • 入力: CSS ルールの編集

于 2020-12-10T12:20:39.273 に答える
0

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

于 2013-07-11T20:36:11.567 に答える