«Inspecter» un élément de survol?

Remarque: j'ai lu des fils similaires, mais aucun de mes problèmes - je peux faire un clic droit dessus, il disparaît alors.

Je trouve "Inspecter l'élément" un outil inestimable dans Chrome, mais ma dernière incursion, alors que j'apprends les méthodes magiques que beaucoup d'entre vous possèdent déjà, m'a vu créer un sous-menu pour un élément de ma barre de navigation, qui apparaît ci-dessous en survolant. élément parent.

La fenêtre contextuelle (ou vers le bas) n'est pas tout à fait stylée comme je le souhaite, alors je clique avec le bouton droit de la souris> inspecte l'élément pour voir ce qui vient d'où exactement et avoir une meilleure idée de la façon d'obtenir l'effet souhaité.

Cependant, dès que j'éloigne ma souris du menu, elle est partie.

Je ne peux donc pas sélectionner différents éléments dans le volet d'inspection et voir quelle zone est mise en surbrillance en même temps.

Existe-t-il un moyen de contourner ce problème, sans changer le menu pour qu'il reste "pop-up" une fois activé?

Si l' hovereffet est donné avec CSSalors oui, j'utilise normalement deux options pour obtenir ceci:

Un, à seela hover effectlorsque la souris quitter le hover area:
Ouvrez l'inspecteur dans la fenêtre à quai et d' augmenter la largeur jusqu'à atteindre votre HTML element, puis faites un clic droit et le menu contextuel doit être sur la zone d'inspecteur ... puis lorsque vous déplacez la souris sur la vue inspecteur , le hover effectkeep activé dans le document.

Deux, à keepla hover effectmême si la souris ne survole pas la HTML element, ouvrez l'inspecteur, allez à Styles TABet cliquez sur l'icône en haut à droite qui dit Toggle Element State... (rectangle en pointillés avec une flèche) Là , vous pouvez activer manuellement le Hover Event(entre autres) avec le case à cocher fournie.

Si ce n'est pas clair du tout, faites-le moi savoir et je pourrai ajouter quelques captures d'écran. Modifié : capture d'écran ajoutée.

Et enfin et comme je le dis au début, je ne pourrai faire ça que si le hoverest réglé avec CSS:HOVER... quand on contrôle le hover stateavec jQuery.onMouseOverpar exemple, ne fonctionne (parfois) que la méthode One.

J'espère que ça aide.

Si le survol est déclenché par JS, suspendez simplement l'exécution du script via le clavier. C'est une manière beaucoup plus simple de geler le DOM que les autres réponses ne le suggèrent.

Voici comment procéder dans Chrome. Je suis sûr que Firefox a une procédure équivalente:

1. Ouvrez les outils de développement et accédez aux sources.

2. Notez le raccourci pour suspendre l'exécution du script— F8.

   

3. Interagissez avec l'interface utilisateur pour faire apparaître l'élément.

4. Hit F8.
5. Vous pouvez maintenant déplacer votre souris, inspecter le DOM, peu importe. L'élément y restera.

Ce qui a fonctionné pour moi, c'est de sélectionner le tag spécifique que je voulais inspecter et de le faire:

Après avoir fait ce qui précède, je sélectionnerais à nouveau normalement qu'une balise, puis la liste déroulante restera automatiquement telle quelle même lorsque je passe la souris vers d'autres endroits comme Inspecter l'élément, etc.

Vous pouvez simplement actualiser le navigateur lorsque vous inspectez les éléments du menu déroulant pour revenir à l'état normal.

J'espère que cela t'aides. :)

Vous pouvez également le faire dans la console javascript:

$('#foo').trigger('mouseover');

Un qui "gèlera" l'élément dans l'état "survol".

Voici comment je le fais sans changement de CSS ni pause de JS dans Chrome (je suis sur un Mac et je n'ai pas de PC devant moi si vous utilisez Win):

1. ouvrez votre console de développeur.
2. n'activez pas encore l'outil d'inspection de survol, mais ouvrez plutôt le sous-menu souhaité en déplaçant votre souris dessus.
3. appuyez sur Command+ Shift+ C(Mac) ou Ctrl+ Shift+ C(Win / Linux)

maintenant, l'outil d'inspection de survol s'appliquera aux éléments que vous avez ouverts dans votre sous-nav.

Je ne sais pas s'il était présent dans les révisions précédentes du navigateur, mais je viens de découvrir cette méthode extrêmement simple.

Ouvrez l'inspecteur dans Chrome ou Firefox, faites un clic droit sur l'élément qui vous intéresse et sélectionnez l'option appropriée (dans ce cas: survoler). Cela déclenchera le CSS associé.

Captures d'écran de Firefox 55 et de chrome 61.

Excellent truc!

Merci à gmo pour ce conseil. Je ne savais pas que ces paramètres d'attributs étaient extrêmement utiles.

En tant que petite révision du libellé, j'expliquerais ce processus comme suit:

• Faites un clic droit sur l'élément que vous souhaitez styliser

  • Ouvrez l'outil «Inspecter»

  • Sur le côté droit, accédez au petit onglet Styles

  • Trouvé au-dessus du contenu de la feuille de style CSS

  • Sélectionnez l'option .hov - Cela vous donnera tous les paramètres disponibles pour l'élément HTML sélectionné

  • Cliquez et modifiez toutes les options pour être inactif

  • Sélectionnez maintenant l'état que vous souhaitez modifier - Lors de l'activation de l'un de ceux-ci, votre feuille de style vous amènera directement à ces paramètres:

Styles - Ajuster les filtres - Éléments interactifs

Cette information a été une bouée de sauvetage pour moi, je ne peux pas croire que je viens d'en entendre parler!

changez le CSS pour que la propriété qui cache le menu ne soit pas appliquée pendant que vous travaillez dessus, c'est ce que je fais.

J'avais besoin de le faire, mais l'élément que j'essayais d'inspecter a été ajouté et supprimé dynamiquement en fonction de l'état de survol d'un autre élément. Ma solution est similaire à celle-ci , mais cela n'a pas vraiment fonctionné pour moi.

Alors voici ce que j'ai fait:

1. Ajoutez un script simple pour entrer en mode débogueur sur mouseoverl'élément qui déclenche l'événement de survol qui vous préoccupe.

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. Ensuite, avec la console de développement ouverte dans Chrome, survolez votre élément et vous entrerez en mode débogueur. Accédez à la section sources des outils de développement et cliquez sur le bouton "Reprendre l'exécution du script" (le bouton bleu en forme de lecture ci-dessous).

Une fois que vous faites cela, votre DOM sera mis en pause dans l'état de survol, et vous pouvez utiliser l'inspecteur d'éléments pour inspecter tous les éléments tels qu'ils existent dans cet état.