Vis en skjult div på svevet ved hjelp av JavaScript

Mens du utvikler nettsteder, er det noen situasjoner der noe informasjon er skjult og vises på musen som svevet over en viss linje eller element. Så spørsmålet som kan komme til tankene dine er hvordan nettutviklere gjør det. Ettersom JavaScript er et dynamisk skriptspråk, tilbyr det noen måter å gjøre dynamiske endringer på websider. For eksempel kan du bruke et JavaScript "mus over”Hendelseslytter for å utføre spesifikke oppgaver.

Dette innlegget vil beskrive prosedyren for å vise en skjult div på Hover ved hjelp av JavaScript.

Hvordan du viser en skjult div på svevet ved hjelp av JavaScript?

Bruk følgende metoder for å vise en skjult div på Hover:

• Mouseover Event lytter med synlighetseiendom
• Mouseover Event lytter med visningseiendom

La oss undersøke hvordan disse tilnærmingene fungerer.

Metode 1: Vis en skjult div på Hover ved hjelp av MouseOver Event Lytter med Synlighetseiendom

Bruke "synlighet”Eiendom sammen med arrangementets lytter som heter“mus over”. Sett "synlig”Verdien av synlighetsegenskapen for å vise DIV, og for å skjule diven, angi verdien som“skjult”.

Syntaks

Følg den gitte syntaks for å vise den skjulte diven på Hover:

element.stil.synlighet = 'synlig';

Eksempel

Først må du lage et avsnitt ved hjelp av

Tag som vil vise en skjult div mens du svever på den. Tilordne en ID “sveve”Til det som vil bruke for å få referansen til elementet:

Sveve på meg! Jeg vil vise en interessant ting

Lag en div, som vil bli vist mens du svever over avsnittet. Sett visningseiendommen til “ingen”, Som indikerer at elementet vil være skjult

For å lære JavaScript, følg Linuxhint -opplæringen. Det vil være veldig nyttig for deg.

Etter å ha utført ovennevnte HTML -kode, vil utdataene være som følger:

Ovennevnte utgang viser bare innholdet i

Tag, tagens innhold er skjult på grunn av “Display: Ingen”:

Nå, i JavaScript -filen, henter det første elementet der DIV -elementet vises på Hover -hendelsen ved å bruke "id”:

const hover = dokument.getElementById ('Hover');

Få deretter en referanse til DIV -elementet som vil vises når du svever over linjen, og lagrer det i en variabel "Hiddendiv”:

const hiddendiv = dokument.getElementById ('skjul');

Sett "synlighet”Eiendom til“Hiddendiv”Som lagrer en referanse til“div”Element som“synlig" på "mus over”Arrangement som vil bli kalt mens du svever over linjen:

sveve.AddEventListener ('Mouseover', funksjon HandleMouseOverEvent ()
Hiddendiv.stil.synlighet = 'synlig';
);

Etter å ha svevet over linjen, sett "synlighet”Eiendom til“Hiddendiv" som "skjult" på "Mouseout”Hendelse som vil skjule Div -elementet mens markøren er borte fra linjen:

sveve.AddEventListener ('Mouseout', funksjon HandleMouseOutEvent ()
Hiddendiv.stil.synlighet = 'skjult';
);

Den gitte utgangen viser at den skjulte div vises med hell på Hover ved hjelp av musoveringshendelsen med synlighetseiendom:

Metode 2: Vis en skjult div på Hover ved hjelp av Mouseover Event Lytter med Display Property

En annen måte å vise en skjult div på svevet er å bruke “vise”Eiendom med“mus over”Hendelseslytter. For å vise den skjulte diven, sett verdien av visningsegenskapen som “blokkere”.

Syntaks

Bruk den gitte syntaks for visningsegenskapen for å vise DIV -elementet:

element.stil.display = 'blokk';

Eksempel

Etter å ha fått referansene til DIV -elementet og avsnittet der Hover -hendelsen skal opptre, kan du sette "blokkere”Som verdien av displayegenskapen til DIV -elementet på“mus over”Hendelseslytter:

sveve.AddEventListener ('Mouseover', funksjon HandleMouseOverEvent ()
Hiddendiv.stil.display = 'blokk';
);

For å skjule diven igjen, sett "ingen”Som visningsegenskapsverdi: Hold musepekeren.AddEventListener ('Mouseout', funksjon

HandlemouseOutEvent ()
Hiddendiv.stil.display = 'ingen';
);

Produksjon

Vi har samlet all nødvendig informasjon relatert til å vise den skjulte diven på Huge ved hjelp av JavaScript.

Konklusjon

For å vise en skjult div på svevet, “mus over”Hendelseslytter med“synlighet”Eiendom og“vise”Eiendom brukes. Mens du bruker synlighetsegenskapen for å vise den skjulte div, kan du angi verdien "synlig”, Og for å bruke visningsegenskapen, angi verdien“blokkere”. Dette innlegget beskrev prosedyren for å vise en skjult div på svevet i JavaScript.