参照：Chrome開発者ツールのホバー状態

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

質問

見たい :hover クロムでホバリングしているアンカーのスタイル。 FireBugには、要素の異なる状態を選択できるスタイルドロップダウンがあります。 Chromeで似たようなものを見つけることができないようです。私は何かが足りませんか？

役に立ちましたか？

解決

これで、PSUEDOクラスのルールの両方を確認し、要素に強制することができます。

のようなルールを見るために :hover スタイルペインで小さなものをクリックします :hov 右上のテキスト。

Toggle element state

要素を強制する :hover 状態、右クリックしてください。

Force element state

追加のヒント 要素パネル の Chrome開発者ツールのショートカット.

他のヒント

編集：この回答はバグ修正の前でした。TnothCuttの回答を参照してください。

これは少し注意が必要でしたが、ここに行きます：

  • 要素を右クリックしますが、マウスポインターを要素から遠ざけないでください。ホバー状態に保ちます。
  • キーボードを介して要素を検査し、矢印を押してからキーを入力します。
  • 一致したCSSルールの下で開発者ツールを見ると、Hover：Hoverを確認できるはずです。

PS：質問タグの1つでこれを試しました。

ブートストラップのツールチップにホバー状態を見たかったのです。 Chrome Dev ToolsのHover Stateを強制すると、必要な出力は作成されませんでしたが、Cromeでマウスエンターイベントをトリガーすると、Chromeでトリックが行われました。 jqueryがページに存在する場合、実行できます。

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Forcing hover or mouseenter for Bootstrap Tooltips

見る方法はいくつかあります ホバー状態 Chrome開発者ツールのスタイル。

方法01

enter image description here

方法02

enter image description here

Firefoxのデフォルト開発者の通行料

enter image description here

Firebugで

enter image description here

それが役立つ場合、これは最新のChrome（47.0.2526.106）で簡単に思えます。

要素を検査し、左溝の3つの白い点をクリックします。
click on the three white dots

次に、このドロップダウンから目的の要素状態を選択します。
this dropdown

これを行う方法はないと思います。私が提出しました 機能リクエスト. 。方法があれば、Googleの開発者はそれを指摘し、答えを編集します。そうでない場合は、待って見なければなりません。 （あなたはそれに投票するために問題を主演することができます）

Chrome Projectメンバーによるコメント1: ：10.0.620.0では、スタイルパネルには、選択した要素のホバースタイルが表示されますが、アクティブではありません。

（この投稿の時点）現在 安定したチャネル バージョンは8.0.552.224です。

あなたはあなたを交換することができます 安定したチャネル Google Chromeのインストール ベータチャネル または 開発チャネル （見る 早期アクセスリリースチャネル).

aをインストールすることもできます 開発チャネルよりも最新のクロムの二次設置.

...カナリアビルドは、開発チャネルよりも頻繁に更新され、リリースされる前にテストされていません。 Canary Buildは使用できない場合があるため、デフォルトのブラウザとして設定することはできず、Google Chromeの上記のチャネルに加えてインストールすることができます。 ...

私がしていることは非常に回避的であることを知っていますが、それは完全に機能し、それが私が毎回それをする方法です。

Undock Chrome Developer Tools

次に、次のように進みます。

  • まず、Chrome開発者ツールがロック解除されていないことを確認してください。
  • 次に、DEVツールウィンドウの任意の側を、ホバリング中に検査する要素の中央に移動します。

Hover on element

  • 最後に、要素をホバリングし、要素を右クリックして検査し、マウスをDEVツールウィンドウに移動すると、要素であるHOVER CSSで再生できます。

乾杯！

メニューをデバッグしていました hover Chromeで述べ、Hover Stateコードを見ることができるようにこれを行いました。

の中に Elements パネルクリックします Toggle Element state ボタンと選択 :hover.

の中に Scripts パネルに移動します Event Listeners Breakpoints 右下のセクションで選択します Mouse -> mouseup.

次に、メニューを検査し、必要なボックスを選択します。マウスボタンをリリースすると、選択した要素ホバー状態が停止して表示されるはずです Elements パネル（を見てください Styles セクション）。

Babikerが提案した以下の手順をフォローすることでスタイルを見ることができました - 「要素を右クリックしますが、マウスポインターを要素から遠ざけないでください。ホバー状態に保ちます。キーボードを介して要素を選択します。次に、キーを入力します。」

スタイルを変更するには、上記の手順に従ってから、キーボードのCtrl +タブを押してブラウザタブを変更します。次に、デバッグするタブの[戻り]をクリックします。ホバー画面はまだそこにあります。マウスを開発者ツールエリアに慎重に持ち込みます。

に変わる ホバー Chromeのステータスは非常に簡単です。以下の手順に従ってください。

1) 右クリック ページで、検査を選択します

enter image description here

2）で検査したい要素を選択します dom

enter image description here

3）ピンアイコンを選択します enter image description here （要素の状態を切り替える）

4）次にチェックします ホバー

これで、選択したホバー状態を見ることができます dom ブラウザで！

私の場合、ブートストラップツールチップをダブしたいです。しかし、上記の方法は私にとってはうまくいきません。ブートストラップは、マウスイン/アウトイベントのようなものによってこれを実装したと思います。

とにかく、ボタンに乗ると、ボタンの下に兄弟HTML要素が生成されるため、[開発者ツール]ウィンドウの[要素]タブでボタンの親要素を選択し、ボタンをホバリングし、「Ctrl + C」を選択します。次に、生成されたコードを含むソースコードを貼り付けることができます。最後に生成されたコードを見つけ、「要素」タブで「HTMLとして編集」してソースコードに追加します。

それが誰かを助けることができることを願っています。

これはもはやChromeの問題ではなく、万が一の念のために問題だと思います。私はこのjqueryを書きました 脚本 TABキーを使用して移動したらDOMを検査します。

「マウスオーバー」を使用するように変更された場合、次のようになります。

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

クリックするたびにイベントハンドラーを削除するために簡単に変更したり、停止したい要素で何かをしたりできます。

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