Zobacz: stan najechania w Narzędziach programisty Chrome

Chcę zobaczyć :hoverstyl kotwicy, nad którą unoszę się w Chrome . W Firebug istnieje styl, który pozwala mi wybrać różne stany dla elementu.

Nie mogę znaleźć czegoś podobnego w Chrome. Czy coś brakuje?

Teraz możesz zobaczyć obie reguły pseudoklasowe i wymusić je na elementach.

Aby zobaczyć reguły jak :hoverw okienku Style, kliknij mały :hovtekst w prawym górnym rogu.

Aby wymusić :hoverstan elementu , kliknij go prawym przyciskiem myszy i wybierz :hover.

Dodatkowe wskazówki na temat panelu elementów w Skrótach Narzędzi dla programistów Chrome .

EDYCJA: Ta odpowiedź była przed naprawą błędu, patrz odpowiedź tnothcutt.

• Kliknij element prawym przyciskiem myszy, ale NIE przesuwaj wskaźnika myszy poza element, utrzymuj go w stanie najechania kursorem.
• Wybierz element inspekcji za pomocą klawiatury, jak w strzałce w górę, a następnie naciśnij klawisz Enter.
• Zajrzyj do narzędzi programistycznych w sekcji Dopasowane reguły CSS, powinieneś zobaczyć: hover.

PS: Próbowałem tego na jednym z twoich tagów pytań.

Chciałem zobaczyć stan najechania myszką na etykietach Bootstrap. Wymuszenie stanu: hover w Chrome Narzędzia deweloperskie nie utworzyły wymaganego wyjścia, ale wywołanie zdarzenia mouseenter przez konsolę załatwiło sprawę w Chrome. Jeśli na stronie istnieje jQuery, możesz uruchomić:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Istnieje kilka sposobów wyświetlania stylów HOVER STATE w Narzędziach Chrome dla programistów.

Metoda 01

Metoda 02

Z domyślną opłatą dla programistów Firefoksa

Z Firebug

Jeśli to pomaga, wydaje się to łatwiejsze w najnowszym Chrome (47.0.2526.106):

Sprawdź element, a następnie kliknij trzy białe kropki w lewej rynnie:

Następnie wybierz żądany stan elementu z tego menu:

Nie sądzę, żeby można to zrobić. Przesłałem żądanie funkcji . Jeśli istnieje sposób, programiści w Google z grubsza to podkreślą, a ja zmodyfikuję swoją odpowiedź. Jeśli nie, będziemy musieli poczekać i obejrzeć. (możesz oznaczyć gwiazdkę numerem, aby na nią głosować)

Komentarz 1 członka projektu Chrome : W wersji 10.0.620.0 panel Style pokazuje style: zaznaczenie dla wybranego elementu, ale nie: aktywne.

(od tego postu) Aktualna wersja kanału stabilnego to 8.0.552.224.

Możesz zastąpić instalację stabilnego kanału przeglądarki Google Chrome kanałem Beta lub kanałem deweloperskim (patrz Kanały wczesnego dostępu ).

Możesz także zainstalować dodatkową instalację chrome, która jest jeszcze bardziej aktualna niż kanał deweloperów .

... Wersja Canary jest aktualizowana nawet częściej niż kanał deweloperski i nie jest testowana przed wydaniem. Ponieważ kompilacja Canary może być czasem bezużyteczna, nie można jej ustawić jako domyślnej przeglądarki i można ją zainstalować jako dodatek do dowolnego z powyższych kanałów Google Chrome. ...

Wiem, że to, co robię, jest całkiem obejściem, jednak działa idealnie i tak właśnie robię za każdym razem.

Następnie postępuj w ten sposób:

• Najpierw upewnij się, że Narzędzia programistyczne Chrome są oddokowane.
• Następnie po prostu przesuń dowolną stronę okna narzędzi deweloperskich na środek elementu, który chcesz sprawdzić, gdy jest najechany kursorem.

• Na koniec najedź myszką na element, kliknij prawym przyciskiem myszy i sprawdź element, przesuń mysz do okna Narzędzia deweloperskie, a będziesz mógł grać ze swoim elementem: najedź css.

Twoje zdrowie!

Debugowałem hoverstan menu w Chrome i zrobiłem to, aby zobaczyć kod stanu najechania myszą:

W Elementspanelu kliknij Toggle Element stateprzycisk i wybierz :hover.

W Scriptspanelu przejdź do Event Listeners Breakpointsw prawej dolnej części i wybierz Mouse -> mouseup.

Teraz sprawdź menu i wybierz odpowiednie pole. Po zwolnieniu przycisku myszy powinien on zatrzymać się i pokazać stan zaznaczenia elementu w Elementspanelu (spójrz na Stylessekcję).

Zmiana stanu aktywowania w Chrome jest dość łatwa, wystarczy wykonać następujące czynności:

1) Kliknij stronę prawym przyciskiem myszy i wybierz opcję inspekcji

2) Wybierz element, który chcesz sprawdzić w DOM

3) Wybierz ikonę pinezki (Przełącz stan elementu)

4) Następnie zaznacz kursor

Teraz możesz zobaczyć stan aktywacji wybranego DOM w przeglądarce!

Widziałem styl, wykonując poniższe kroki sugerowane przez Babikera - „Kliknij element prawym przyciskiem myszy, ale NIE przesuwaj wskaźnika myszy od elementu, utrzymuj go w stanie unoszenia. Wybierz opcję sprawdzania elementu za pomocą klawiatury, jak w strzałce w górę i następnie klawisz Enter ”.

Aby zmienić styl, wykonaj powyższe kroki, a następnie - Zmień kartę przeglądarki, naciskając ctrl + TAB na klawiaturze. Następnie kliknij ponownie kartę, którą chcesz debugować. Twój ekran aktywacji będzie nadal wyświetlany. Teraz ostrożnie przenieś mysz do obszaru narzędzi programistycznych.

W moim przypadku chcę skopiować etykietkę bootstrap. Ale powyższe metody nie działają dla mnie. Wydaje mi się, że bootstrap zaimplementował to przez zdarzenie wejścia / wyjścia myszy.

W każdym razie, kiedy zatrzymam kursor na przycisku, wygeneruje element brat pod przyciskiem, więc wybieram element nadrzędny przycisku w zakładce „Elementy” okna „Narzędzia programistyczne”, najeżdżam przyciskiem i „Ctrl + C”, następnie mogę wkleić kod źródłowy, który zawiera wygenerowany kod. Najpierw znajdź wygenerowany kod i dodaj go do kodu źródłowego, klikając „Edytuj jako HTML” na karcie „Elementy”.

Mam nadzieję, że to może komuś pomóc.

Myślę, że nie jest to już problem w Chrome, ale na wszelki wypadek. Napisałem ten skrypt jQuery, aby sprawdzić DOM, gdy poruszam się z klawiszem TAB.

Jeśli zmieniony na „mouseover”, wyglądałby tak:

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

Możesz go łatwo zmodyfikować, aby usunąć moduł obsługi zdarzeń za każdym razem, gdy klikniesz lub zrobisz coś na elemencie, na którym chcesz się zatrzymać.