Sprawdź element, który pojawia się tylko wtedy, gdy inny element jest najeżdżany / wprowadzany myszą

119

Często chcę sprawdzić element (np. Podpowiedź), który pojawia się tylko wtedy, gdy inny element jest najeżdżany / wprowadzany myszą. Element, który się pojawia, staje się widoczny za pośrednictwem zdarzenia mouseenter jQuery.

Nie mogę sprawdzić podpowiedzi, ponieważ znika ona, gdy moja mysz opuszcza zawierający element.

Czy istnieje sposób na wstrzymanie zdarzeń JS, aby móc najechać kursorem na element, a następnie wstrzymać JS przeglądarki i pomyślnie go sprawdzić?

Na przykład spróbuj przejrzeć podpowiedzi z bootstrapem Twittera: http://getbootstrap.com/javascript/#tooltips .

javascript google-chrome-devtools Don P.
źródło
9
Do Twojej wiadomości, jeśli element pojawia się z powodu CSS zamiast JS, możesz wymusić :hoverna nim kliknięcie prawym przyciskiem myszy na element w widoku Elementy (DOM) w Narzędziach deweloperskich, wybierając „Wymuś stan elementu”, a następnie „: hover”.
MMM,

Odpowiedzi:

226

W Chrome 38.0.2094.0 jest to dość łatwe.

Oto jak to będzie wyglądać:

Krok po kroku:

  1. Otwórz DevTools w panelu Źródła
  2. Wyświetl podpowiedź, umieszczając wskaźnik myszy na przycisku
  3. Naciśnij klawisz F8, aby zablokować stronę
  4. Przejdź do panelu Elementy i użyj ikony lupy w lewym górnym rogu, aby wybrać podpowiedź

Jeśli podpowiedź pojawia się z powodu CSS, oto co możesz zrobić w takim przypadku:

Krok po kroku:

  1. Otwórz DevTools
  2. Wybierz element wyzwalający w narzędziach deweloperskich (link)
  3. Kliknij prawym przyciskiem myszy i wybierz „stan elementu siły” i wybierz „: hover”
  4. Sprawdź podpowiedź CSS
Jakiś facet
źródło
1
@YuriyGalanter Jest dostępny za pośrednictwem ikony lunety w lewym górnym rogu. Wystarczy kliknąć ikonę, a następnie kliknąć etykietkę :)
Šime Vidas,
3
Tak, dodałem GIF, aby łatwiej było zobaczyć, co robię.
Jakiś facet,
2
@DonnyP Użyłem byzanz-record. To pakiet, z którym możesz dostać sudo apt-get install byzanz.
Jakiś facet,
5
Jest też LICEcap , nagrywa część ekranu bezpośrednio w super zoptymalizowanym formacie GIF. Windows, OS X i Linux.
fregante
2
@ bfred.it LICEcap nie jest dostępny dla Linuksa. Zobacz ten numer Github na ten temat. Wygląda na to, że ludzie odnoszą sukcesy, używając WINE .
Isaac Gregson,
15

Zarówno Safari i Chrome Web Inspector pola wyboru oferty, gdzie można przełączać :active, :focus, :hoveri :visitedstan elementu. Korzystanie z nich może być jeszcze łatwiejsze.

Safari:

Pola wyboru w Safari

Chrom:

Pola wyboru w Chrome

zıəs uɐɟəʇs
źródło
5
Etykietka nie jest wyzwalana przez :hoverstyle.
Šime Vidas,
2
Firebug w przeglądarce Firefox ma to samo (minus :visited, który jest ograniczony, aby zapobiec podsłuchiwaniu) - na karcie HTML znajduje się w menu rozwijanym „Styl” po prawej stronie
Izkata.
1
Natywne narzędzia programistyczne @Izkata dla Firefoksa, kliknij prawym przyciskiem myszy element w bułce tartej lub drzewie HTML / DOM i wybrać z :hover, :activelub :focus.
Kiran Price,
4

Jest też inny trudny sposób:

  1. Przejdź nad elementem, który powoduje wyświetlenie podpowiedzi.
  2. Kliknij prawym przyciskiem myszy, aby otworzyć menu kontekstowe.
  3. Przesuń kursor myszy do okna narzędzi deweloperskich i kliknij lewym przyciskiem myszy w dowolnym miejscu panelu narzędzi deweloperskich.

Twoja podpowiedź pozostanie widoczna, będziesz mógł ją wtedy obejrzeć na karcie Element.

Przetestowano w Chrome. Wygląda na to, że nie działa w przeglądarce Firefox.

Nicolas Forney
źródło
1
Tak właśnie robiłem w przeszłości, ale odpowiedź @ SomeGuy jest najlepsza i najłatwiejsza.
John Washam,
@JohnDubya Nie, tak naprawdę nie jest. To może być oficjalny sposób, ale na pewno nie jest łatwiejszy. Wymaganych jest zbyt wiele kroków.
MiniRagnarok,
To jest to, co zwykle robię, ale nie zawsze to działa.
Synetech
3

Chociaż odpowiedź @ SomeGuy jest doskonała (t-up dla animowanych gifów), jako alternatywa zawsze możesz to zrobić programowo. Po prostu otwórz konsolę i wpisz nazwę wydarzenia

document.getElementById('id').dispatchEvent(new Event('event-type'));

(z czystą składnią specyficzną dla javascript może się różnić w zależności od przeglądarki)

Jeszcze łatwiej z jQuery:

$('#id').trigger('event-type');

W swoim przykładzie ( http://getbootstrap.com/javascript/#tooltips ) otwórz konsolę i wpisz, na przykład:

$("button:contains('Tooltip on right')").mouseenter();

Podpowiedź pojawia się w DOM i można ją ręcznie sprawdzić / zmodyfikować:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

Podobnie jak w komentarzach, jeśli przesuniesz wskaźnik myszy nad ramkę strony, możesz wywołać inne zdarzenia, takie jak mouseout. Aby temu zapobiec, możesz nacisnąć F8(jak w odpowiedzi na konto) lub wpisać debugger;(co jest jego odpowiednikiem w skrypcie)

blgt
źródło
1
Podczas sprawdzania elementu nadal możesz wywołać inne zdarzenia (np mouseout ), więc w pierwszej kolejności nie rozwiązuje to problemu. Musisz być bardzo ostrożny przy jego wyborze. Ale jest to podejście alternatywne.
MMM,