Mostra un div nascosto su Hover usando JavaScript

Durante lo sviluppo di siti Web, ci sono alcune situazioni in cui alcune informazioni sono nascoste e visualizzate sul mouse su una determinata linea o elemento. Quindi, la domanda che può venire in mente è come gli sviluppatori web lo fanno. Poiché JavaScript è un linguaggio di scripting dinamico, offre alcuni modi per apportare modifiche dinamiche alle pagine Web. Ad esempio, puoi usare un javascript "Mouseover"Ascoltatore di eventi per eseguire compiti specifici.

Questo post descriverà la procedura per mostrare un div nascosto su Hover usando JavaScript.

Come mostrare un div nascosto su hover usando javascript?

Usa i seguenti metodi per mostrare un div nascosto su Hover:

• MouseOver Event Listener con proprietà di visibilità
• Ascoltatore di eventi mouseover con proprietà display

Esaminiamo come funzionano questi approcci.

Metodo 1: mostra un Div nascosto su Hover usando l'ascoltatore di eventi mouseover con proprietà di visibilità

Usa il "visibilità"Proprietà insieme all'ascoltatore dell'evento chiamato"Mouseover". Impostare il "visibile"Valore della proprietà di visibilità per mostrare il div e nascondere il div, impostare il valore come"nascosto".

Sintassi

Segui la sintassi indicata per mostrare il div Hidden su Hover:

elemento.stile.visibilità = 'visibile';

Esempio

Innanzitutto, crea un paragrafo utilizzando

tag che mostrerà un div nascosto mentre si libra su di esso. Assegna un ID "molare"A esso userà per ottenere il riferimento dell'elemento:

Hover su di me! Mostrerò una cosa interessante

Crea un div, che verrà mostrato mentre si libra sul paragrafo. Imposta la proprietà del display su "nessuno", Che indica che l'elemento sarà nascosto

Per imparare JavaScript, seguire i tutorial Linuxhint. Sarà molto utile per te.

Dopo aver eseguito il codice HTML sopra, l'output sarà il seguente:

L'output sopra mostra solo il contenuto del

tag, il contenuto del tag è nascosto a causa del "Display: nessuno":

Ora, nel file JavaScript, prendi il primo elemento in cui l'elemento Div verrà visualizzato nell'evento Hover usando il suo "id":

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

Quindi, ottieni un riferimento all'elemento Div che apparirà quando si libra sulla linea e memorizzalo in una variabile "hiddendiv":

const hiddendiv = documento.getElementById ('nascondi');

Impostare il "visibilità"Proprietà del"hiddendiv"Che memorizza un riferimento di"div"Elemento come"visibile" sul "Mouseover"Evento che verrà chiamato mentre si libra sulla linea:

molare.addEventListener ("MouseOver", funzione HandleMouseOverEvent ()
hiddendiv.stile.visibilità = 'visibile';
);

Dopo essersi mobilizzato sulla linea, imposta il "visibilità"Proprietà del"hiddendiv" COME "nascosto" sul "Mouseout"Evento che nasconderà l'elemento Div mentre il cursore è lontano dalla linea:

molare.addEventListener ('Mouseout', funzione HandleMouseUevent ()
hiddendiv.stile.visibilità = 'nascosto';
);

L'output fornito mostra che il Div nascosto viene mostrato correttamente su Hover usando l'evento MouseOver con proprietà di visibilità:

Metodo 2: mostra un Div nascosto su Hover utilizzando l'ascoltatore di eventi mouse con la proprietà

Un altro modo per mostrare un Div nascosto su Hover è usare il "Schermo"Proprietà con il"Mouseover"Ascoltatore di eventi. Per mostrare il Div nascosto, impostare il valore della proprietà di visualizzazione come "bloccare".

Sintassi

Usa la sintassi data per la proprietà Visualizza per mostrare l'elemento Div:

elemento.stile.display = 'block';

Esempio

Dopo aver ottenuto i riferimenti dell'elemento Div e il paragrafo in cui si eseguerà l'evento Hover, imposterà il “bloccare"Come valore della proprietà di visualizzazione dell'elemento Div sul"Mouseover"Ascoltatore di eventi:

molare.addEventListener ("MouseOver", funzione HandleMouseOverEvent ()
hiddendiv.stile.display = 'block';
);

Per nascondere di nuovo il Div, imposta "nessuno"Come valore della proprietà display: hover.addEventListener ("Mouseout", funzione

HandleMouseOutEvent ()
hiddendiv.stile.Display = 'Nessuno';
);

Produzione

Abbiamo compilato tutte le informazioni necessarie relative a mostrare il divieto nascosto su Hover usando JavaScript.

Conclusione

Per mostrare un div nascosto su Hover, il "Mouseover"Ascoltatore di eventi con il"visibilità"Proprietà e"Schermo"La proprietà viene utilizzata. Durante l'utilizzo della proprietà di visibilità per mostrare il Div nascosto, impostare il valore "visibile", E per l'utilizzo della proprietà display, impostare il valore"bloccare". Questo post ha descritto la procedura per visualizzare un div nascosto su hover in javascript.