Chromeデベロッパーツールで：hoverの状態を確認する

Chromeで:hoverホバーしているアンカーのスタイルを確認したい。ではFirebugは、私は要素の異なる状態を選択することができますスタイルのドロップダウンメニューがあります。

Chromeで同様のものが見つからないようです。何か不足していますか？

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

:hover[スタイル]ペインのようなルールを表示するには、:hov右上の小さなテキストをクリックします。

要素を強制的に:hover状態にするには、要素を右クリックしてを選択します:hover。

上のその他のヒント要素パネルでクロム開発ツールのショートカット。

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

• 要素を右クリックしますが、マウスポインターを要素から離さないでください。ホバー状態のままにします。
• 上矢印キーを押してからEnterキーを押すように、キーボードで要素を検査を選択します。
• Matched CSS Rulesの下の開発者ツールを見ると、：hoverが表示されるはずです。

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

ブートストラップのツールチップでホバー状態を確認したかったのです。Chrome開発ツールで：hover状態を強制すると、必要な出力が作成されませんでしたが、コンソールでmouseenterイベントをトリガーすると、Chromeではうまくいきました。ページにjQueryが存在する場合、実行できます。

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

ChromeデベロッパーツールでHOVER STATEスタイルを表示するには、いくつかの方法があります。

方法01

方法02

Firefoxのデフォルトの開発者料金

Firebugを使用

それが役立つ場合、これは最新のChrome（47.0.2526.106）でより簡単なようです。

要素を調べてから、左の樋の3つの白い点をクリックします。

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

これを行う方法はないと思います。私は、提出された特徴の要求を。方法があれば、Googleの開発者がそれを指摘し、答えを編集します。そうでない場合は、待機して監視する必要があります。（あなたはそれに投票するために問題にスターを付けることができます）

Chromeプロジェクトメンバーによるコメント1：10.0.620.0では、[スタイル]パネルに、選択した要素の：hoverスタイルが表示されますが、：activeは表示されません。

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

Google Chromeの安定したチャネルのインストールをベータチャネルまたはDevチャネルに置き換えることができます（早期アクセスリリースチャネルを参照）。

また、Devチャネルよりも最新のChromeの2次インストールをインストールすることもできます。

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

私がやっていることはかなりの回避策であることを知っていますが、それは完全に機能し、それが毎回行う方法です。

次に、このように進みます：

• まず、Chromeデベロッパーツールがドッキングされていないことを確認します。
• 次に、Dev Toolsウィンドウの任意の側を、ホバーしているときに検査する要素の中央に移動します。

• 最後に、要素にカーソルを合わせ、要素を右クリックして検査し、マウスをDev Toolsウィンドウに移動すると、element：hover cssでプレイできます。

乾杯！

hoverChromeでメニュー状態をデバッグしていて、ホバー状態コードを表示できるようにこれを行いました：

でElementsパネルの上にクリックToggle Element stateボタンを選択:hover。

でScriptsパネルに移動Event Listeners Breakpoints右下部に選択しMouse -> mouseup。

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

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

1）ページを右クリックして、inspectを選択します

2）DOMで検査する要素を選択します

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

4）次にホバーにチェックを入れます

これで、選択したDOMのホバー状態をブラウザーで確認できます。

バビカーの提案する以下の手順に従ってスタイルを確認できます-「要素を右クリックしますが、マウスポインターを要素から離さないでください。ホバー状態のままにしてください。キーボードを使用して要素を検査してください。次に、キーを入力してください。」

スタイルを変更するには、上記の手順に従ってください-キーボードでCtrl + Tabを押して、ブラウザのタブを変更します。次に、デバッグするタブをクリックします。ホバー画面はそのまま残ります。次に、マウスを慎重に開発者ツール領域に移動します。

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

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

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

これはChromeではもはや問題ではないと思います。このjQuery スクリプトを書いたを記述して、TABキーで移動したときにDOMを検査しました。

'mouseover'を使用するように変更すると、次のようになります。

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

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