72

ホバー イベントに反応して Javascript によって引き起こされる DOM の変更や、:hover セレクターによって適用されるさまざまな CSS ルールに関連する CSS レイアウトの問題をデバッグしたいと思うことがよくあります。

通常、私は Firebug を使用して、問題を引き起こしている要素を検査し、その CSS プロパティが何であるか、およびそれらのプロパティがどこから来ているかを確認します。ただし、マウスを Firebug パネルに移動するとすぐに、関心のある要素がホバーされなくなり、適用される CSS ルールが異なるため、ホバリングが関係する場合は不可能になります。の JS ホバー) DOM が変更されます。

ホバーイベント中のDOMを検査するために、DOMの状態と:hoverのアプリケーションを「フリーズ」する方法はありますか?

もちろん、この種の問題をデバッグする方法に関する他のアイデアは大歓迎です。

4

15 に答える 15

44

Firebug でこれを行うことができますが、少し「バグ」があります。要素を調べてから html タブをクリックして、たとえば DOM タブをクリックすると、html タブに戻ると、右側の「スタイル」css タブに矢印ドロップダウンセレクターが表示され、そこで選択できます:その要素のホバー状態をアクティブにします。表示するためにタブを切り替える必要があるのは残念ですが、私にとってはうまくいきます。

于 2010-04-21T19:51:56.790 に答える
32

リンクを検査するとき、Firebug はデフォルトの CSS 状態、つまり a:link に適用されたスタイルを表示します。デフォルトでは、:hover および :active スタイルは表示されません。幸いなことに、[スタイル] をクリックして適切なオプションを選択することで、リンクの状態を変更できます。

ここに画像の説明を入力

于 2012-12-13T07:36:45.487 に答える
22

onmouseoverを受け取る要素に関数ハンドラを追加します:hover。その関数内で、console.info(element)知りたい要素を呼び出します。

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

firebug がアクティブな状態でこれを実行すると、firebug コンソールで要素を検査できるようになります。

于 2009-07-03T21:08:31.387 に答える
19

firebug の HTML ビューで、右側のパネルを見て、[スタイル] タブを見つけます。下矢印をクリックして、 を選択します:hover。

于 2011-11-15T15:55:45.973 に答える
5

Firefox (v33.1.1) の場合:

  • 要素の検査 (Q)
  • DOM ビューで要素を右クリックします。
  • コンテキスト メニューの下部にある :hover、:active、または :focus を選択します
于 2014-12-01T02:11:22.777 に答える
4

In Chrome (version 35):

  • Inspect element
  • Inside the elements viewer right click on the element .
  • Select "Force element state" -> :active, :hover, :focus, :visited
于 2014-07-16T07:44:13.210 に答える
3

Dojo などの一部の JavaScript ツールキットは、:hover ではなく dijitButtonHover などの CSS クラスを使用してスタイルを設定します。

したがって、[スタイル] タブの :hover トリックは機能しません。

代わりに、HTML タブでノード (CSS クラスの変更者) を右クリックし、「属性変更でブレーク」を選択できます。

于 2013-05-30T19:48:19.890 に答える
2

その要素を調べることもできます。その後、スタイルのタブに小さなドロップダウン矢印が表示されます。「Show User Agent」、「Expand Shorthand Properties」のようなものがあり、その下にさらに2つあるはずです（ホバー状態のあるものを調べていると思います）:activeを:hover選択する:hoverと、ゴールデンになるはずです。

于 2010-10-14T00:40:59.350 に答える
2

CSSの問題については、Web開発者プラグインが非常に貴重だと思います:

http://chrispederick.com/work/web-developer/

それをロードすると、2 つのツールを自由に使用できます。

  1. マウスオーバーされた要素のファイルから継承された css、shift-ctrl-y を使用

  2. 計算されたcss（.cssファイルにない、またはjqueryなどの.cssメソッドを介して適用されたインラインstyle =を含む）-shift-ctrl-fを押します

後者は、要素に適用されたすべてのクラスも返します。

もちろん、非表示フィールドや Cookie の編集 (侵入テストに使用できます) を含む、フォームの優れたデバッグなど、他の優れた用途もあります。

于 2009-07-03T22:35:07.063 に答える
2

新しい Firefox バージョン (少なくとも v57 以降) では、インスペクターの UI は、他の回答が投稿されたときとは少し異なります。:active要素の/ :hover/状態を有効にしてフリーズするに:focusは、それを検査 (右クリック -> 要素の検査) し、インスペクターで次をクリックします。

ここに画像の説明を入力

結果：

ここに画像の説明を入力

ソース(画像は CC-BY-SA v2.5、Mozilla Contributors の下でライセンスされています)

于 2018-10-16T22:41:53.060 に答える
1

firebug には完全な解決策 (マウスオーバー/ホバー シミュレーション効果) はありません。

ただし、firebug でホバー状態を編集する方法がいくつかあります。

  1. :activeあなたと一緒に状態を追加します:hover

    a:hover, a:active { ... }

    要素の上でマウス ダウンし、ドラッグして離すと、要素はアクティブなままになります。

  2. :hover状態を.hoverクラスに変える

    ソースファイル (Firebug の [スタイル] タブ) をクリックして、CSS ルールを編集できます。

    もちろん、.hover要素からクラスを追加 (および削除) します。

于 2010-06-03T05:03:25.137 に答える
1

私は同じ問題を抱えており、Firebug で Firefox のホバー オブジェクトを検査できませんでしたが、Safari の Web インスペクターは現在の状態をフリーズさせ、検査を許可することがわかりました。Safari の Web インスペクタを有効にするには、ターミナルに次の行を入力して Safari を再起動します。

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

ブラウザーでホバー要素をアクティブにし、右クリックして [要素の検査] を選択します。ページは現在の状態でフリーズし、つかの間のオブジェクトを心ゆくまで調べることができます。

于 2010-02-23T09:19:09.203 に答える
0

ホバーしたイベントを「フリーズ」するために、別の CSS や Javascript を作成することがよくあります。Firebug で完璧に微調整し、ホバーを元の位置に戻します。

于 2011-01-21T21:07:53.623 に答える
0

この投稿が少し古いことは承知していますが、Google でこれを見つけた人のために、マウスを動かすだけで HTML / CSS レイアウトを視覚化できるクロス ブラウザー ツールを作成しました。ホバー状態の要素を簡単に表示できます。

HTML ボックス ビジュアライザー - GitHub

于 2016-10-24T05:22:30.817 に答える
0

はい、ホバー状態をトリガーするときに「要素の検査」を右クリックできます。これは、Firebug と WebKit でうまくいきました。

于 2012-09-27T15:39:46.420 に答える