Pokaż ukryty div na wisu za pomocą JavaScript

Podczas opracowywania stron internetowych istnieją pewne sytuacje, w których niektóre informacje są ukryte i wyświetlane na myszy na określonej linii lub elemencie. Pytanie, które może przyjechać na twój umysł, brzmi, jak robią to twórcy stron internetowych. Ponieważ JavaScript jest dynamicznym językiem skryptowym, oferuje kilka sposobów wprowadzania dynamicznych zmian na stronach internetowych. Na przykład możesz użyć JavaScript „myszy„Detarter zdarzenia, aby wykonywać określone zadania.

W tym poście opisuje procedurę pokazania ukrytej div na wisu za pomocą JavaScript.

Jak pokazać ukrytą div na wisu za pomocą JavaScript?

Użyj następujących metod, aby pokazać ukrytą div na wisu:

• MOUSEOVER EVIMETER Z WIDZALNOŚCI
• Mouseover Event Listener z właściwością wyświetlacza

Sprawdźmy, jak działają te podejścia.

Metoda 1: Pokaż ukrytą div na wisu za pomocą słuchacza zdarzeń Mouseover z właściwością widoczności

Użyj "widoczność„Własność wraz z słuchaczem wydarzeń o nazwie„myszy". Ustaw "widoczny„Wartość właściwości widoczności, aby pokazać div i ukryć div, ustaw wartość jako„ukryty".

Składnia

Postępuj zgodnie z podaną składnią, aby wyświetlić ukrytą div na wisu:

element.styl.widoczność = „Visible”;

Przykład

Najpierw utwórz akapit za pomocą

tag, który pokaże ukrytą div podczas unoszenia się na niej. Przypisz identyfikator „unosić się„Do tego użyje, aby uzyskać odniesienie do elementu:

Unosić się na mnie! Pokażę interesującą rzecz

Utwórz div, który zostanie pokazany podczas unoszenia się nad akapitem. Ustaw swoją właściwość wyświetlania na „nic”, Który wskazuje, że element zostanie ukryty

Aby nauczyć się JavaScript, śledź samouczki Linuxhint. Będzie to dla Ciebie bardzo pomocne.

Po wykonaniu powyższego kodu HTML wyjście będzie następujące:

Powyższe wyjście pokazuje tylko zawartość

tag, treść tagu jest ukryta z powodu „Nie wyświetla się”:

Teraz, w pliku JavaScript, pobieraj pierwszy element, w którym element DIV zostanie wyświetlony na zdarzeniu zawisowym za pomocą jego „ID”:

const Hover = dokument.getElementById („Hover”);

Następnie uzyskaj odniesienie do elementu DIV, który pojawi się podczas unoszenia się nad linią, i przechowuj go w zmiennej ”Hiddendiv”:

const hiddendiv = dokument.getElementById („ukryj”);

Ustaw "widoczność„Własność„ „Hiddendiv”, Który przechowuje odniesienie do„div„Element jako„widoczny" na "myszy„Wydarzenie, które zostanie wywołane podczas unoszenia się nad linią:

unosić się.addEventListener („MOUSEOVER”, funkcja HandlemouseOverEvent ()
Hiddendiv.styl.widoczność = „Visible”;
);

Po unoszeniu się nad linią ustaw „widoczność„Własność„ „Hiddendiv" Jak "ukryty" na "Museout„Wydarzenie, które ukryje element div, gdy kursor jest z dala od linii:

unosić się.addEventListener („MOUSEOut”, funkcja HandlemouseOutevent ()
Hiddendiv.styl.Visibility = „Hidden”;
);

Dane dane wyjściowe pokazuje, że ukryta div jest z powodzeniem wyświetlana na zawisie za pomocą zdarzenia myszy z właściwością widoczności:

Metoda 2: Pokaż ukrytą div na wisu za pomocą słuchacza zdarzeń Mouseover z właściwością wyświetlania

Innym sposobem pokazania ukrytej div na wisu jest użycie „wyświetlacz„Nieruchomość z„myszy„Słuchacz wydarzenia. Aby pokazać ukrytą div, ustaw wartość właściwości wyświetlania jako „blok".

Składnia

Użyj podanej składni dla właściwości wyświetlania, aby wyświetlić element DIV:

element.styl.display = „blok”;

Przykład

Po uzyskaniu odniesień do elementu DIV i akapitu, w którym wystąpi wydarzenie zawisowe, ustaw „blok”Jako wartość właściwości wyświetlania elementu DIV na„myszy„Dyskusator wydarzenia:

unosić się.addEventListener („MOUSEOVER”, funkcja HandlemouseOverEvent ()
Hiddendiv.styl.display = „blok”;
);

Za ponowne ukrywanie div, ustaw „nic”Jako wartość właściwości wyświetlania: nachylenie.addEventListener („myszka”, funkcja

HandlemouseueTevent ()
Hiddendiv.styl.display = „Brak”;
);

Wyjście

Opracowaliśmy wszystkie niezbędne informacje związane z pokazaniem ukrytej div na zawisie za pomocą JavaScript.

Wniosek

Pokazać ukrytą div na wisieniu, „myszy„Listener wydarzenia z„widoczność„Własność i„ „wyświetlacz„Własność jest używana. Podczas korzystania z właściwości widoczności do wyświetlania ukrytej div, ustaw wartość „widoczny”, A za korzystanie z właściwości wyświetlacza ustaw wartość„blok". W tym poście opisano procedurę wyświetlania ukrytej div na zawisie w JavaScript.