Voir: état de survol dans les outils de développement Chrome.
Je souhaite connaître le style :hover pour une ancre sur laquelle je survole dans Chrome. Dans Firebug, une liste déroulante de styles me permet de sélectionner différents états pour un élément. Je n'arrive pas à trouver quelque chose de similaire dans Chrome. Est-ce que je manque quelque chose?
Vous pouvez maintenant voir les deux règles psuedo-class et les forcer sur des éléments.
Pour voir les règles telles que :hover dans le volet Styles, cliquez sur le petit texte :hov en haut à droite.
Pour forcer un élément dans l'état :hover, cliquez dessus avec le bouton droit de la souris.
Conseils supplémentaires sur le panneau éléments dans raccourcis des outils de développement Chrome .
EDIT: Cette réponse était antérieure au correctif, voir la réponse de tnothcutt.
- Cliquez avec le bouton droit de la souris sur l'élément, mais ne déplacez PAS le pointeur de la souris, maintenez-le en survol.
- Choisissez inspecter l’élément à l’aide du clavier, comme dans la flèche vers le haut, puis la touche Entrée.
- Dans les outils de développement, sous Règles de correspondance, vous devriez pouvoir voir: survolez.
PS: J'ai essayé ceci sur l'une de vos balises de question.
Je voulais voir l'état de survol sur mes info-bulles Bootstrap. Forcer l'état du: survol dans Chrome dev dev Tools n'a pas créé la sortie requise, mais le fait de déclencher l'événement mouseenter via la console s'est avéré très utile dans Chrome. Si jQuery existe sur la page, vous pouvez exécuter:
$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');
Il existe plusieurs façons de voir les styles HOVER STATE dans les outils de développement Chrome.
Méthode 01
Méthode 02
Avec le tarif de développeur par défaut de Firefox
avec Firebug
Si cela vous aide, cela semble être plus facile avec le dernier Chrome (47.0.2526.106):
Inspectez l'élément, puis cliquez sur les trois points blancs dans la gouttière de gauche:
Ensuite, choisissez l'état de l'élément souhaité dans cette liste déroulante:
Je ne pense pas qu'il y ait un moyen de faire cela. J'ai soumis ne demande de fonctionnalité. S'il y a un moyen, les développeurs de Google vont le souligner et je modifierai ma réponse. Sinon, nous devrons attendre et regarder. (vous pouvez commencer par voter pour voter)
Commentaire 1 par un membre du projet Chrome : Dans 10.0.620.0, le panneau Styles affiche les styles: survolés pour l'élément sélectionné, mais pas: actif.
(à partir de cet article) Actuel canal stable la version est 8.0.552.224.
Vous pouvez remplacer votre canal stable de Google Chrome par le canal bêta ou canal Dev (voir Chaînes de sortie pour accès anticipé ).
Vous pouvez également installer une installation secondaire de chrome qui est encore plus à jour que le canal Dev .
... La version de Canary est mise à jour encore plus fréquemment que le canal Dev et n'est pas testée avant sa publication. Étant donné que la version de Canary peut parfois être inutilisable, elle ne peut pas être définie comme navigateur par défaut et peut être installée en plus des chaînes susmentionnées de Google Chrome. ...
Je sais que ce que je fais est tout à fait la solution de contournement, mais cela fonctionne parfaitement et c'est comme ça que je le fais à chaque fois.
Ensuite, procédez comme suit:
- Commencez par vous assurer que les outils de développement Chrome sont désamarrés.
- Ensuite, déplacez n’importe quel côté de la fenêtre Outils de développement au milieu de l’élément que vous souhaitez inspecter en survol.
- Enfin, survolez l’élément, faites un clic droit et inspectez l’élément, déplacez votre souris dans la fenêtre Outils de développement et vous pourrez jouer avec votre élément: hover css.
À votre santé!
Je déboguais un état de menu hover avec Chrome et je l’ai fait pour voir le code d’état de survol:
Dans le panneau Elements, cliquez sur le bouton Toggle Element state et sélectionnez :hover.
Dans le panneau Scripts, accédez à Event Listeners Breakpoints dans la section en bas à droite et sélectionnez Mouse -> mouseup.
Inspectez maintenant le menu et sélectionnez la case souhaitée. Lorsque vous relâchez le bouton de la souris, il devrait s’arrêter et afficher l’état de survol de l’élément sélectionné dans le panneau Elements (consultez la section Styles).
Dans mon cas, je veux dupliquer l'info-bulle d'amorçage. Mais les méthodes ci-dessus ne fonctionnent pas pour moi. Je suppose que bootstrap a implémenté cela par quelque chose comme un événement souris in/out.
Quoi qu'il en soit, lorsque je survole un bouton, il génère un élément frère HTML sous le bouton. Je sélectionne donc l'élément parent du bouton dans l'onglet "Eléments" de la fenêtre "Outils de développement", sur le bouton, et "Ctrl + C", alors je peux coller le code source qui contient le code généré. Enfin, recherchez le code généré et ajoutez-le au code source en sélectionnant "Modifier en tant que HTML" dans l'onglet "Eléments".
J'espère que ça peut aider quelqu'un.
Je pouvais voir le style en suivant les étapes suggérées par Babiker - "Élément de clic droit, mais ne déplacez PAS le pointeur de la souris, maintenez-le en position de survol. Choisissez l'élément à inspecter à l'aide du clavier, comme dans la flèche puis touche Entrée. "
Pour changer de style, suivez les étapes ci-dessus, puis - Modifiez l'onglet de votre navigateur en appuyant sur les touches ctrl + TAB du clavier. Cliquez ensuite sur l'onglet que vous souhaitez déboguer. Votre écran de survol sera toujours là. Maintenant, prenez soigneusement votre souris dans la zone des outils de développement.
Passer au statut au survol dans Chrome est assez facile, procédez comme suit:
1) Faites un clic droit dans votre page et sélectionnez inspecter
2) Sélectionnez l’élément à inspecter dans le DOM
3) Sélectionnez l’icône de la broche 
(Etat de l'élément bascule)
4) Puis cochez le survol
Maintenant, vous pouvez voir l'état de survol de la sélection DOM dans le navigateur!
Je pense que ce n'est plus un problème dans Chrome, mais juste au cas où. J'ai écrit cette jQuery script pour inspecter le DOM lorsque je me déplace avec la touche TAB.
Si changé pour utiliser 'mouseover', ressemblerait à ceci:
$("body *").on('mouseover', function(event) {
console.log(event.target);
inspect(event.target);
event.stopPropagation();
});
Vous pouvez facilement le modifier pour supprimer le gestionnaire d'événements chaque fois que vous cliquez ou faites quelque chose sur un élément sur lequel vous souhaitez vous arrêter.