Fai clic su Div agli elementi sottostanti - CSS

Fai clic su Div agli elementi sottostanti - CSS
Gli sviluppatori possono utilizzare altri vari elementi sotto un contenitore. Supponiamo di voler fare clic su eventuali articoli sottostanti accessibili tramite il div. La maggior parte degli sviluppatori avrà problemi gravi perché può fare clic sugli articoli sottostanti solo se fanno clic sul lato esterno per la sovrapposizione nel div. Per gestire tale situazione, scegli l'opzione di fare clic su Div creato.

Questo post spiegherà il metodo per fare clic sul Div per sottostante gli elementi in CSS.

Come fare clic su Div per elementi sottostanti in CSS?

Per fare clic su un div agli elementi sottostanti in CSS, prima, crea un div principale con un nome particolare e aggiungi un ""Elemento per definire il collegamento ipertestuale, che viene utilizzato per il collegamento da una pagina all'altra. Quindi, inserire un tag "" seguendo la stessa procedura e specifica un nome di classe.

Passaggio 1: crea un contenitore di div

Innanzitutto, utilizza il “"Elemento per la creazione di un contenitore" div "in un file HTML. Quindi, specificare un "id"All'interno del tag di apertura" div "con un valore particolare.

Passaggio 2: creare contenitore di div nidificato

Successivamente, crea un altro contenitore di div nel primo contenitore seguendo la stessa procedura.

Passaggio 3: inserire l'intestazione

Successivamente, utilizzare il tag di intestazione HTML per aggiungere una voce. In questo scenario, il "

"Viene utilizzato il tag di intestazione.

Passaggio 4: aggiungi un elemento per elementi sottostanti

Ora, inserisci un ""Elemento per collegare una pagina con un'altra. Per fare ciò, aggiungi il "Href"Attributo all'interno del tag" "e impostare il valore di questo attributo per assegnare il collegamento del sito Web:



Clicca sul link


= "https: // linuxhint.com "> non reattivo



= "https: // linuxhint.com "> reattivo

Produzione

Passaggio 5: contenitore Style Main Div

Accedi al div principale con l'aiuto del selettore degli attributi e il nome come ".contenuto principale":

#contenuto principale
Margine: 30px 50px;
Border: 3px punteggiato di verde;
imbottitura: 20px 40px;
Background-color: RGB (207, 250, 207);

Ora, applica le proprietà CSS sopra indicate:

  • "margine"Viene utilizzato per specificare lo spazio attorno al confine dell'elemento.
  • "confine"Determina il bordo all'esterno dell'elemento definito.
  • "imbottitura"Assegna lo spazio all'interno del confine definito.
  • "colore di sfondo"Distribuito per impostare il colore sul retro dell'elemento.

Di conseguenza, il contenitore principale verrà disegnato come segue:

Passaggio 6: applicare la proprietà "puntatore-eventi"

Ora, accedi al contenitore nidificato usando il nome della classe come ".radice":

.radice
Event puntatore: nessuno;

Quindi, applica il "Eventi di puntatore"Per gestire i componenti HTML che reagiscono agli eventi del topo e toccare. In questo scenario, il valore di "Eventi di puntatore"È impostato come"nessuno", Il che significa che l'elemento non reagisce agli eventi puntanti:

Passaggio 7: accedi alla classe figlio

Ora, accedi al ""Tag con il nome della classe come".bambino". Quindi, applica il "Eventi di puntatore"Proprietà e impostare il valore come"auto":

.bambino
Puntatore-Event: Auto;

IL "auto"Il valore viene utilizzato per reagire a eventi puntanti come clic.

Produzione

Si tratta di fare clic su Div a Elements Undering in CSS.

Conclusione

Per fare clic su Div agli elementi sottostanti, prima, crea un div principale con un nome particolare e aggiungi un attributo di classe o ID. Quindi, inserire il “"Elemento e aggiungi l'attributo di classe da bambino. Successivamente, accedi al Div e applica il "Eventi di puntatore"Con il valore nessuno. Successivamente, accedi all'attributo figlio e applica "Eventi di puntatore"Con il valore"auto". Questo articolo ha dimostrato il metodo per fare clic su Div agli elementi sottostanti.