CSS/JavaScript のホバー問題をデバッグする方法

StackOverflow https://stackoverflow.com/questions/1080803

質問

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

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

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

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

役に立ちましたか？

解決

onmouseoverを取っている要素に:hover機能ハンドラーを追加します。その関数の内部では、あなたが知っているしたい方の要素にconsole.info(element)を呼び出します。

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};
あなたがアクティブな放火犯でこれを実行すると、

、要素は、放火犯コンソールで検査する利用できるようになります。

他のヒント

あなたはFirebugの中でこれを行うことができますが、その少し「バギー」。あなたは要素を検査して、インスタンスのDOM]タブに、[HTML]タブをオフにクリックした場合、あなたが戻ってHTML]タブに行くと、右側の「スタイル」のCSSタブは、矢印は、選択できるセレクタドロップダウンがあります：活性であることがその要素の状態を合わせます。それが表示するために取得するには、タブを切り替えるには持って吸うが、それは私のために動作します。

リンク：リンクを検査すると、

、Firebugのは、デフォルトのCSSの状態に適用される、すなわちスタイルを示しています。デフォルトでは、：ホバーと：アクティブスタイルは表示されません。幸いにも、あなたがスタイルをクリックし、適切なオプションを選択することによって、リンクの状態を変更することができます：

ここに画像の説明を入力します

放火犯で、HTMLビューで、右側のパネルに見て、「スタイル」タブを見つけながら。下向き矢印をクリックし、:hoverを選択します。

Firefox (v33.1.1) の場合:

  • 要素の検査(Q)
  • DOM ビューで要素を右クリックします
  • コンテキスト メニューの下部で :hover、:active、または :focus を選択します。

など道場のようないくつかのJavaScriptツールキットは、スタイルではなくするためにこのようなdijitButtonHoverとしてのCSSクラスを使用します。ホバーを

だから、[スタイル]タブ：ホバーのトリックは動作しません。

。

その代わり、あなたは「属性変更にブレーク」HTMLタブで（CSSクラスを変更するのです）ノードを右クリックし、することができます。

Chrome (バージョン 35) の場合:

  • 要素を検査する
  • 要素ビューア内で要素を右クリックします。
  • 「要素の状態を強制する」を選択 -> :active、:hover、:focus、:visited

CSS の問題に関しては、Web 開発者プラグインが非常に貴重であることがわかりました。

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

それをロードすると、2 つのツールが自由に使えるようになります。

  1. マウスオーバーした要素上のファイルから CSS を継承するには、shift-ctrl-y を使用します

  2. 計算された CSS (.css ファイルにない、または jquery などの .css メソッドを通じて適用されたインライン style= を含む) - Shift-Ctrl-F を押します。

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

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

また、スタイルにタブを矢印ダウン少しドロップがなければならない、その要素を検査することができます。それは:activeと:hoverは:hoverを選択します（私はあなたがホバー状態を持っているものを検査していることを推測している）、その下の2以上があるはず、「速記プロパティ]を展開」、「ショー・ユーザー・エージェント」のようなものを持って、あなたがすべき黄金のこと。

私は同じ問題を抱えていたと私はFirebugのとFirefoxでホバーオブジェクトを検査できなかった一方で、Safariのウェブインスペクタは現在の状態を凍結し、検査を可能にすることがわかりました。 Safariのウェブインスペクタを有効にするには、単に端子に次の行を入力し、サファリを再起動します：

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

を右クリックし、「要素を点検」は、ブラウザでのホバー要素をアクティブにします。ページでは、あなたの心のコンテンツへのつかの間のオブジェクトを検査することができ、それの現在の状態でフリーズします。

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

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

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

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

    要素の上にマウスを置き、ドラッグして放すと、要素はアクティブなままになります。

  2. ターン :hover 状態にします .hover クラス

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

    その後、もちろん、 .hover 要素のクラス。

私はよく私のホバーイベントを「凍結」するためにいくつかの代替CSSやJavascriptを作ります。 Firebugので完璧にそれを微調整して所定の位置に戻って私のホバーを入れます。

はい、あなたはホバー状態をトリガするとき、「要素を点検し、」右クリックすることができます。これは、FirebugのとWebKitの中で私のために働いています。

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

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

新しいFirefoxのバージョン（上記少なくともV57と）には、検査員のUIは、他の回答を投稿した場合よりもわずかに異なっています。有効にして凍結要素の:active / :hover / :focus状態を、それを点検（右クリック - >要素を点検）し、インスペクタで上をクリックします：

" ここに画像の説明を入力する

結果：

" ここに画像の説明を入力する

ソースに（画像が認可されていますCC-BY-SAのV2.5の下で、Mozillaの協力者）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top