Klikk gjennom Div til underliggende elementer - CSS

Klikk gjennom Div til underliggende elementer - CSS
Utviklere kan bruke andre forskjellige elementer under en DIV -beholder. Anta at du vil klikke på alle underliggende elementer som er tilgjengelige via DIV. De fleste utviklere vil ha alvorlige problemer fordi de bare kan klikke på underliggende elementer hvis de klikker på yttersiden for overlegget i DIV. For å håndtere en slik situasjon, gå for muligheten til å klikke gjennom den opprettede div.

Dette innlegget vil forklare metoden for å klikke gjennom DIV for å underliggende elementene i CSS.

Hvordan klikke gjennom DIV til underliggende elementer i CSS?

For å klikke gjennom en div til underliggende elementer i CSS, først, opprette en hoveddiv med et bestemt navn og legge til et "”Element for å definere hyperkoblingen, som brukes til kobling fra en side til en annen. Sett deretter inn en "" -kode etter samme prosedyre og spesifiser et klassenavn.

Trinn 1: Lag en div container

Først, bruk "”Element for å lage en“ div ”-beholder i en HTML -fil. Deretter spesifisere en "id”Inne i“ Div ”åpningskoden med en bestemt verdi.

Trinn 2: Lag nestet div container

Neste, lag en annen div -beholder i den første beholderen ved å følge samme prosedyre.

Trinn 3: Sett inn overskrift

Etter det, bruk HTML -overskriften for å legge til en overskrift. I dette scenariet er "

”Heading Tag brukes.

Trinn 4: Legg til et element for underliggende elementer

Nå, sett inn en “”Element for å koble en side til en annen. For å gjøre det, legg til “href”Attributt inne i“ ”-merket og angi verdien av denne attributtet for å tilordne lenken til nettstedet:



Klikk på lenken


= "https: // linuxhint.com "> ikke responsiv



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

Produksjon

Trinn 5: Style Main Div Container

Få tilgang til hoveddiven ved hjelp av attributtvelgeren og navnet som “.hovedinnhold”:

#hovedinnhold
Margin: 30px 50px;
Border: 3px prikket grønn;
polstring: 20px 40px;
bakgrunnsfarge: RGB (207, 250, 207);

Bruk nå ovennevnte CSS -egenskaper:

  • margin”Brukes til å spesifisere rommet rundt elementets grense.
  • grense”Bestemmer grensen utenfor det definerte elementet.
  • polstring”Tildeler rommet inne i den definerte grensen.
  • bakgrunnsfarge”Distribuert for å sette fargen på elementets bakside.

Som et resultat vil hovedbeholderen bli stylet som følger:

Trinn 6: Bruk egenskap "Peker-Events"

Få tilgang til den nestede beholderen ved å bruke klassenavnet som “.rot”:

.rot
Peker-hendelser: Ingen;

Deretter bruker du “peker-hendelser”For å administrere HTML -komponentene som reagerer på mus og berøringshendelser. I dette scenariet er verdien av "peker-hendelser”Er satt som“ingen”, Som betyr at elementet ikke reagerer på pekerhendelser:

Trinn 7: Få tilgang til barneklassen

Få tilgang til “”Tag med klassenavnet som“.barn”. Deretter bruker du “peker-hendelser”Eiendom og angi verdien som“bil”:

.barn
Peker-hendelser: Auto;

bil”Verdien brukes til å reagere på pekerhendelser som klikk.

Produksjon

Det handler om å klikke gjennom DIV til underliggende elementer i CSS.

Konklusjon

For å klikke gjennom div til underliggende elementer, først, lage en hoveddiv med et bestemt navn og legge til en klasse eller ID -attributt. Sett deretter inn "”Element og legg til klasseattributtet som barn. Etter det får du tilgang til div og bruk "peker-hendelser”Med verdien ingen. Deretter får du tilgang til barnets attributt og bruk "peker-hendelser”Med verdien”bil”. Denne oppskrivningen har vist metoden for å klikke gjennom DIV til underliggende elementer.