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

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 .

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

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:

Chrom:

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.

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)