Chrome:hoverでホバーしているアンカーのスタイルを確認したい。Firebugには、要素のさまざまな状態を選択できるスタイルドロップダウンがあります。
Chromeで似たようなものが見つからないようです。私は何かが足りないのですか？
313935 次
13 に答える
1367
これで、両方の疑似クラスルールを確認し、それらを要素に強制することができます。
[スタイル]ペインのようなルールを表示するには、右上:hoverの小さなテキストをクリックします。:hov
要素を強制的に:hover状態にするには、要素を右クリックして[]を選択します:hover。
Chromeデベロッパーツールのショートカットの要素パネルに関する追加のヒント。
于 2011-07-21T15:25:11.307 に答える
56
編集：この回答はバグ修正前のものでした。tnothcuttの回答を参照してください。
これは少しトリッキーでしたが、ここに行きます：- 要素を右クリックしますが、マウスポインタを要素から離さないでください。ホバー状態のままにしてください。
- 上矢印キーを押してからEnterキーを押すように、キーボードから要素の検査を選択します。
- 一致したCSSルールの下の開発者ツールを見てください。：hoverが表示されるはずです。
PS：私はあなたの質問タグの1つでこれを試しました。
于 2010-12-23T01:47:53.243 に答える
36
Bootstrapツールチップでホバー状態を確認したかったのです。:hoverChrome開発ツールで状態を強制しても必要な出力は作成されませんでしたmouseenterが、コンソールを介してイベントをトリガーすると、Chromeでうまくいきました。ページにjQueryが存在する場合は、次を実行できます。
$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');
于 2014-12-23T15:25:30.920 に答える
26
ChromeデベロッパーツールでHOVERSTATEスタイルを表示する方法はいくつかあります。
方法01
方法02
Firefoxのデフォルトの開発者料金
Firebugで
于 2017-01-06T08:05:05.423 に答える
9
それが役立つ場合、これは最新のChrome（47.0.2526.106）では簡単なようです。
要素を調べてから、左側の側溝にある3つの白い点をクリックします。
次に、このドロップダウンから目的の要素の状態を選択します。
于 2016-01-04T19:22:01.733 に答える
4
これを行う方法はないと思います。機能リクエストを送信しました。方法があれば、グーグルの開発者はそれを無茶苦茶に指摘し、私は私の答えを編集します。そうでなければ、私たちは待って見なければなりません。（問題にスターを付けて投票することができます）
Chromeプロジェクトメンバーによるコメント1：10.0.620.0では、[スタイル]パネルに、選択した要素の：hoverスタイルが表示されますが、：activeは表示されません。
（この投稿の時点で）現在の安定したチャネルのバージョンは8.0.552.224です。
Google Chromeの安定チャネルインストールをベータチャネルまたは開発チャネルに置き換えることができます（早期アクセスリリースチャネルを参照）。
Devチャネルよりもさらに最新のchromeのセカンダリインストールをインストールすることもできます。
... Canaryビルドは、Devチャネルよりもさらに頻繁に更新され、リリースされる前にテストされません。Canaryビルドは使用できない場合があるため、デフォルトのブラウザとして設定できず、GoogleChromeの上記のチャネルのいずれかに加えてインストールされる可能性があります。..。
于 2010-12-23T01:34:19.190 に答える
4
私がやっていることはかなりの回避策であることを知っていますが、それは完璧に機能し、それが私が毎回行う方法です。
次に、次のように進めます。
- まず、Chromeデベロッパーツールがドッキングされていないことを確認します。
- 次に、[開発ツール]ウィンドウのいずれかの側を、ホバーしたときに検査する要素の中央に移動します。
- 最後に、要素にカーソルを合わせ、右クリックして要素を検査し、マウスを[開発ツール]ウィンドウに移動すると、要素で遊ぶことができます：hovercss。
乾杯！
于 2015-08-21T23:11:46.527 に答える
3
Chromeでメニューの状態をデバッグしてhoverいて、ホバー状態のコードを表示できるようにするためにこれを行いました。
Elementsパネルでボタンをクリックして、Toggle Element stateを選択します:hover。
ScriptsパネルEvent Listeners Breakpointsで右下のセクションに移動し、を選択しますMouse -> mouseup。
次に、メニューを調べて、目的のボックスを選択します。マウスボタンを離すと、ボタンが停止し、選択した要素のホバー状態がElementsパネルに表示されます（セクションを参照してくださいStyles）。
于 2012-07-22T15:05:49.807 に答える
3
Chromeでホバーステータスに変更するのは非常に簡単です。以下の手順に従ってください。
1）ページを右クリックして、[検査]を選択します
2） DOMで検査する要素を選択します
3）ピンアイコンを選択します 
（要素状態の切り替え）
4）次にホバーにチェックマークを付けます
これで、選択したDOMのホバー状態をブラウザーで確認できます。
于 2017-06-26T09:01:17.603 に答える
3
于 2021-09-18T06:32:19.727 に答える
1
これはChromeではもはや問題ではないと思いますが、念のためです。このjQueryスクリプトは、Tabキーを使用して移動するときにDOMを検査するために作成しました。
'mouseover'を使用するように変更した場合、次のようになります。
$("body *").on('mouseover', function(event) {
console.log(event.target);
inspect(event.target);
event.stopPropagation();
});
停止したい要素をクリックしたり何かをしたりするたびに、イベントハンドラーを削除するように簡単に変更できます。
于 2013-10-18T01:26:19.687 に答える
1
Babikerが提案する以下の手順に従って、スタイルを確認できます。「要素を右クリックしますが、マウスポインターを要素から離さないで、ホバー状態のままにします。上矢印キーのように、キーボードから要素の検査を選択します。次に、キーを入力します。」
スタイルを変更するには、上記の手順に従ってから、キーボードのCtrl+Tabキーを押してブラウザのタブを変更します。次に、デバッグするタブに戻ります。ホバー画面は引き続き表示されます。次に、マウスを開発者ツール領域に慎重に移動します。
于 2014-05-02T10:55:52.023 に答える
1
私の場合、ブートストラップのツールチップを複製したいと思います。しかし、上記の方法は私にはうまくいきません。ブートストラップは、マウスの入出力イベントのようなものによってこれを実装したと思います。
とにかく、ボタンにカーソルを合わせると、ボタンの下に兄弟のhtml要素が生成されるので、[開発者ツール]ウィンドウの[要素]タブでボタンの親要素を選択し、ボタンにカーソルを合わせて[Ctrl+C]をクリックします。次に、生成されたコードを含むソースコードを貼り付けることができます。最後に生成されたコードを見つけ、[要素]タブの[HTMLとして編集]でソースコードに追加します。
それが誰かを助けることができることを願っています。
于 2018-01-30T08:58:16.933 に答える