web-dev-qa-db-fra.com

Existe-t-il un moyen de tester CSS: survolez dans IE Outils de développement?

Dans Chrome Dev Tools, vous pouvez sélectionner un élément et activer l'état de survol. Existe-t-il un moyen de le faire dans les outils de développement d'Internet Explorer?

39
MattyP

Je ne sais pas quelle version de IE vous utilisiez lorsque vous avez posé cette question.

Juste pour l'information de tout le monde, je peux voir le style de survol via l'onglet HTML en utilisant la séquence d'étapes suivante dans IE 9:

  1. Ouvrez l'outil développeur
  2. Passez la souris sur l'élément dont vous souhaitez afficher le CSS de survol tout en laissant la fenêtre du développeur ciblée .
  3. Appuyez sur F5 pendant que votre souris est toujours sur l'élément
  4. Ctrl + B et cliquez sur l'élément

Vous pouvez maintenant afficher le hover CSS.

Edit (janvier 2015):

Dans IE 11, vous cliquez sur la grande icône bleue "a:" qui apparaît en haut à droite du volet Styles de l'explorateur DOM, puis cochez la case "Survoler".

47
Leo Lei

Dans IE11, vous cliquez sur la grande icône bleue "a:" qui apparaît en haut à droite du volet Styles de l'explorateur DOM, puis cochez la case "Survoler". Screenshot of Internet Explorer 11 F12 Developer Tools with a: highlighted

Si vous ne voyez pas le "a:", sélectionnez d'abord un élément ou une balise HTML dans le volet gauche de l'explorateur DOM.

20
jason_ruz

Je n'ai pas pu trouver l'état CSS: hover dans IE outils de développement non plus. J'ai donc fini par utiliser Firebug Lite à partir d'un bookmarklet.

2

La suggestion de Lao Lei fonctionne. Lorsque vous ouvrez les outils de développement, assurez-vous qu'il est sur le focus pour qu'il puisse recevoir les commandes de raccourci - lorsque vous cliquez sur la barre de défilement de la page ou sur la page, il concentre la fenêtre du navigateur et envoie toutes les commandes de raccourci à la page . Pour éviter les erreurs, procédez comme suit:

  1. trouver l'élément dont vous avez besoin
  2. Ouvrez les outils de développement
  3. concentrer la fenêtre des outils de développement
  4. survolez l'élément que vous voulez
  5. Appuyez sur F5 sans déplacer la souris
  6. Ctrl + B et cliquez sur l'élément

Meilleures salutations.

1
Milen Georgiev

Pour ceux qui trouvent cela sur Google, j'ai créé un outil multi-navigateur qui vous permet de visualiser votre mise en page HTML/CSS en déplaçant simplement la souris. Vous pouvez facilement afficher les éléments dans leur état de survol.

Visualiseur de boîte HTML - GitHub

1
Gabriel McAdams