Siehe :Hover-Status in Chrome Developer Tools

Question

Ich möchte die :hover Stil für einen Anker, an dem ich mich in Chrom . Unter Firebug gibt es ein Stil-Dropdown, mit dem ich verschiedene Zustände für ein Element auswählen kann.

In Chrome kann ich nichts Vergleichbares finden. Übersehe ich etwas?

Answer 1

Ich denke, dies ist nicht mehr ein Problem in Chrome, aber nur für den Fall. Ich schrieb diese jQuery Skript um das DOM zu inspizieren, wenn ich mich mit der TAB-Taste bewege.

Bei einer Änderung zur Verwendung von "mouseover" würde es so aussehen:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

Sie können es leicht ändern, um den Event-Handler zu entfernen, wenn Sie auf ein Element klicken oder etwas tun, das Sie anhalten möchten.

Answer 2

Ich konnte den Stil sehen, indem ich die folgenden von Babiker vorgeschlagenen Schritte befolgte - "Klicken Sie mit der rechten Maustaste auf das Element, aber bewegen Sie den Mauszeiger NICHT von dem Element weg, sondern lassen Sie ihn im Schwebezustand. Wählen Sie das Element über die Tastatur aus, indem Sie den Pfeil nach oben und dann die Eingabetaste drücken."

Um den Stil zu ändern, folgen Sie den obigen Schritten und dann - Wechseln Sie die Registerkarte Ihres Browsers, indem Sie die Tasten Strg + TAB auf der Tastatur drücken. Klicken Sie dann wieder auf die Registerkarte, die Sie debuggen möchten. Ihr Hover-Bildschirm wird immer noch da sein. Gehen Sie nun vorsichtig mit der Maus in den Werkzeugbereich für Entwickler.

Answer 3

In meinem Fall möchte ich bootstrap tooltip dubug. Aber die Methoden oben nicht für mich arbeiten. Ich denke, Bootstrap implementiert dies durch etwas wie Maus in/out-Ereignis.

Wie auch immer, wenn ich mit dem Mauszeiger auf eine Schaltfläche gehe, wird ein HTML-Element unter der Schaltfläche generiert, also wähle ich das übergeordnete Element der Schaltfläche auf der Registerkarte "Elemente" im Fenster "Entwicklertools" aus, gehe mit dem Mauszeiger auf die Schaltfläche und drücke "Strg + C", dann kann ich den Quellcode einfügen, der den generierten Code enthält. Zuletzt suche ich den generierten Code und füge ihn mit "Als HTML bearbeiten" auf der Registerkarte "Elemente" zum Quellcode hinzu.

Ich hoffe, es kann jemandem helfen.

Answer 4

Es ist möglich, die MouseEvent auf Elemente mit JS. Hier ist, wie es zu tun für hover .

1. Untersuchen Sie das Element mit einem Rechtsklick.
2. Kopieren Sie den JS-Pfad wie folgt
3. Öffnen Sie die Konsole in Sources Chrome DevTools durch Drücken der Taste "Esc".
4. Fügen Sie dann den kopierten Pfad ein und fügen Sie ihn mit .dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true })); wie diese:
5. Drücken Sie die Eingabetaste, und Sie können mit allen DOM-Änderungen interagieren, die nach dem Schwebezustand auftreten.

Answer 5

Es ist auch möglich, dass der Code in der Datenbank versteckt ist und es keine Datei gibt, die ihn enthält. Ein Kunde von mir hat das "Travelify"-Thema von Colorlib und einige der Optionen aus der WP-Administrations-GUI schreiben direkt in die DB und die DB generiert den CSS-Code im Handumdrehen - ich kann den CSS-Code im HTML-Quelltext sehen, aber nirgendwo in einer tatsächlichen Datei. Das hat mich verrückt gemacht und ich habe eine Weile gebraucht, um es herauszufinden. Es gibt ein großartiges DB-Suchwerkzeug für WP namens "Search and Replace" von der Inpsyde GmbH, das ich als unschätzbar wertvoll empfunden habe. Seien Sie natürlich vorsichtig damit!

Zum Wohl!