„Sprawdź” element po najechaniu?

Uwaga: czytałem podobne wątki, ale żaden nie jest moim problemem - mogę kliknąć prawym przyciskiem myszy, po prostu znika.

Uważam „Inspekcja elementu” za nieocenione narzędzie w Chrome, jednak moja ostatnia wyprawa, kiedy uczyłem się czarodziejskich sposobów, w jakie wielu z was już znało, sprawiła, że ​​tworzyłem podmenu dla elementu na moim pasku nawigacyjnym, które pojawia się poniżej po najechaniu kursorem element nadrzędny.

Wyskakujące okienko (lub w dół) nie jest dość stylizowane, jak bym chciał, więc klikam prawym przyciskiem myszy> sprawdź element, aby zobaczyć, co dokładnie pochodzi, i uzyskać lepszy pomysł, jak osiągnąć pożądany efekt.

Jednak gdy tylko odsuwam mysz od menu, zniknęło.

Dlatego nie mogę wybrać różnych elementów w okienku inspekcji i zobaczyć, który obszar jest podświetlony w tym samym czasie.

Czy można to obejść bez zmiany menu, tak aby pozostawało ono „wyskakujące” po aktywacji?

Jeśli hoverefekt jest podany z CSSto tak, zwykle używam dwóch opcji, aby to uzyskać:

Jeden, aby gdy opuszczają myszą : otwórz Inspektora zadokowany w oknie i zwiększyć szerokość aż do osiągnięcia swoich , a następnie kliknij prawym przyciskiem myszy i menu podręczne musi być nad strefą inspektor ... wtedy, gdy przesuniesz kursor nad zdaniem inspektora , zachowaj aktywowany w dokumencie.seehover effecthover area
HTML elementhover effect

Dwa, aby nawet jeśli mysz nie jest nad otwórz inspektora, przejdź do i kliknij w prawym górnym ikonę, która mówi ... (kropkowany prostokąt ze strzałką) Nie można ręcznie aktywować (między innymi) z zaznaczone pole wyboru.keephover effectHTML elementStyles TABToggle Element StateHover Event

Jeśli w ogóle nie jest to jasne, daj mi znać, a mogę dodać kilka zrzutów ekranu. Edytowano : dodano zrzut ekranu.

I wreszcie, jak mówię na początku, mogę to zrobić tylko wtedy, gdy hoverjest ustawione na CSS:HOVER... kiedy kontrolujesz na przykład hover statewith jQuery.onMouseOver, działa (czasami) tylko metoda One.

Mam nadzieję, że to pomoże.

Jeśli dymek jest wywoływany przez JS, po prostu wstrzymaj wykonywanie skryptu za pomocą klawiatury. Jest to znacznie prostszy sposób na zamrożenie DOM, niż sugerują inne odpowiedzi.

Oto jak to robisz w Chrome. Jestem pewien, że Firefox ma równoważną procedurę:

1. Otwórz Narzędzia programistyczne i przejdź do Źródła.

2. Zwróć uwagę na skrót do wstrzymania wykonywania skryptu - F8.

   

3. Wejdź w interakcję z interfejsem użytkownika, aby pojawił się element.

4. Hit F8.
5. Teraz możesz poruszać myszą, sprawdzać DOM, cokolwiek. Element pozostanie tam.

Pomogło mi wybranie konkretnego tagu, który chciałem sprawdzić, i zrobienie tego:

Po wykonaniu powyższego zwykle ponownie wybrałbym ten tag, a następnie lista rozwijana automatycznie pozostanie bez zmian, nawet po najechaniu kursorem myszy na inne miejsca, takie jak Sprawdź element itp.

Możesz po prostu odświeżyć przeglądarkę podczas sprawdzania elementów menu rozwijanego, aby powrócić do normalnego stanu.

Mam nadzieję że to pomoże. :)

Możesz to również zrobić w konsoli javascript:

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

To „zamrozi” element w stanie „najechania”.

Oto jak to robię bez zmian CSS lub wstrzymywania JS w Chrome (jestem na Macu i nie mam przed sobą komputera, jeśli używasz Win):

1. otwórz konsolę programisty.
2. nie włączaj jeszcze narzędzia inspekcji po najechaniu, ale zamiast tego otwórz żądane podmenu, najeżdżając na nie myszą.
3. hit Command+ Shift+ C(Mac) lub Ctrl+ Shift+ C(Win / Linux)

teraz narzędzie do inspekcji po najechaniu zostanie zastosowane do elementów, które otworzyłeś w pod-nawigacji.

Nie jestem pewien, czy był obecny w poprzednich wersjach przeglądarki, ale właśnie odkryłem tę niezwykle prostą metodę.

Otwórz inspektora w chrome lub Firefox, kliknij prawym przyciskiem myszy na interesujący Cię element i wybierz odpowiednią opcję (w tym przypadku: najechanie kursorem). Spowoduje to uruchomienie skojarzonego CSS.

Zrzuty ekranu z Firefox 55 i Chrome 61.

Doskonała rzecz!

Dziękuję gmo za tę radę. Nie wiedziałem, że te ustawienia atrybutów są niezwykle pomocne.

W ramach małej zmiany sformułowania wyjaśniłbym ten proces w następujący sposób:

• Kliknij prawym przyciskiem myszy element, który chcesz stylizować

  • Otwórz narzędzie „Sprawdź”

  • Po prawej stronie przejdź do małej karty Style

  • Znaleziono powyżej zawartości arkusza stylów CSS

  • Wybierz opcję .hov - to da ci wszystkie ustawienia dostępne dla wybranego elementu HTML

  • Kliknij i zmień wszystkie opcje, aby były nieaktywne

  • Teraz wybierz stan, który chcesz poprawić - po aktywacji któregokolwiek z nich, arkusz stylów przeniesie Cię bezpośrednio do tych ustawień:

Style - Poprawianie filtrów - Elementy interaktywne

Ta informacja uratowała mi życie, nie mogę uwierzyć, że właśnie o niej usłyszałem!

zmień CSS, aby właściwość, która ukrywa menu, nie była stosowana podczas pracy nad nią, jest tym, co robię.

Musiałem to zrobić, ale element, który próbowałem sprawdzić, został dodany i usunięty dynamicznie na podstawie stanu najechania kursorem innego elementu. Moje rozwiązanie jest podobne do tego , ale nie do końca mi się to udało.

Oto co zrobiłem:

1. Dodaj prosty skrypt, aby przejść do trybu debugera na mouseoverelemencie, który wyzwala zdarzenie najechania, które Cię niepokoi.

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

2. Następnie, gdy konsola programisty jest otwarta w Chrome, najedź kursorem na swój element, a przejdziesz do trybu debugera. Przejdź do sekcji źródeł narzędzi deweloperskich i kliknij przycisk „Wznów wykonywanie skryptu” (niebieski przycisk przypominający odtwarzanie poniżej).

Gdy to zrobisz, twój DOM zostanie zatrzymany w stanie aktywowanym i możesz użyć inspektora elementów do sprawdzenia wszystkich elementów, które istnieją w tym stanie.