web-dev-qa-db-ja.com

CSSをテストする方法はありますか:hover in IE開発者ツール?

Chrome Dev Toolsでは、要素を選択してホバー状態を有効にできます。 Internet Explorer Dev Toolsでこれを行う方法はありますか?

39
MattyP

この質問をしたときに使用したIEのバージョンは不明です。

みんなの情報だけを見るために、IE 9の次の一連の手順を使用して、HTMLタブからホバースタイルを表示できます。

  1. 開発者ツールを開きます
  2. 開発者ウィンドウにフォーカスを置いたまま、ホバーCSSを表示する要素にカーソルを合わせます
  3. マウスがまだ要素の上にある間にF5を押す
  4. Ctrl + Bで要素をクリックします

ホバーCSSを表示できるようになりました。

編集(2015年1月):

IE 11で、DOMエクスプローラーの[スタイル]ペインの右上に表示される大きな青い「a:」アイコンをクリックし、[ホバー]チェックボックスをオンにします。

47
Leo Lei

IE11では、DOMエクスプローラーの[スタイル]ペインの右上に表示される大きな青い「a:」アイコンをクリックし、[ホバー]チェックボックスをオンにします。 Screenshot of Internet Explorer 11 F12 Developer Tools with a: highlighted

「a:」が表示されない場合は、最初にDOMエクスプローラーの左ペインで要素またはHTMLタグを選択します。

20
jason_ruz

IE開発者ツールでもCSS:hover状態が見つかりませんでした。したがって、ブックマークレットからFirebug Liteを使用することになりました。

2

ラオレイの提案は機能します。開発者ツールを開くときは、ショートカットコマンドを受信できるようにフォーカスされていることを確認してください-ページのスクロールバーまたはページをクリックすると、ブラウザーウィンドウがフォーカスされ、すべてのショートカットコマンドがページに送信されます。間違いを避けるために、次のことを行ってください。

  1. 必要な要素を見つける
  2. 開発者ツールを開きます
  3. 開発者ツールのウィンドウにフォーカスする
  4. 目的の要素にカーソルを合わせます
  5. マウスを動かさずにF5を押す
  6. Ctrl + Bキーを押しながら要素をクリックします

宜しくお願いします。

1
Milen Georgiev

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

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

1
Gabriel McAdams