CSS svever ikke
Eksempel # 01:
Vi vil se på noen av elementene i HTML ved å bruke den ikke sveve eiendommen på dem. Vi har startet det første eksemplet fra den grunnleggende HTML -taggen som er et must i en hvilken som helst HTML -kode, fordi uten den vil koden vår ikke fungere uansett. Etter HTML -taggen er det en hodemerke og kroppskoden. Innenfor kroppskoden til HTML -siden vår har vi brukt en overskrift av størrelse 1 eller den største overskriften til HTML -websider. Etter denne overskriften har vi brukt en DIV -tag for å opprette en ny seksjon på websiden vår.
Denne taggen har blitt spesifisert som foreldre som bruker klassestilen. Innenfor denne viktigste div -taggen har vi brukt de fem barnemerkene. Alle de fem barns taggene er spesifisert som "barn" ved hjelp av klasseattributtet. Også alle barneseksjonene inneholder forskjellig nummerering i henhold til deres forekomst. Den viktigste "div" -merket og kroppskoden er lukket. Her kommer tittelkoden som har blitt brukt til å gi et navn til denne websiden. Stilmerket er startet med bruk av "foreldre" -klassespesifikasjonen for å style "foreldre" div -delen av denne websiden.
Displayegenskapen til CSS har blitt brukt til overordnede DIV-seksjonen for å vise den i inline-flex-posisjonen. Bakgrunnsfargen er satt, og grensen til denne bakgrunnen er satt til 1 piksel faststoff med hvit farge. Mens bredden på overordnet “Div” -delen ville være 500 piksler og høyden ville være 120 piksler. Den samme skjermen har blitt brukt for barneseksjoner, og bakgrunnen er satt til en annen farge. Dessuten er grensen til 5 piksler solid grønn farge satt for barneseksjoner. Bredden og høyden på barneseksjoner er blitt definert som 100 piksler hver. Barneseksjonene inneholder ekstra styling i forhold til foreldrenes seksjon. Overgangseiendommen er satt til 0.5 sekunder sammen med fontfamilien. Fontvekten er satt til fet skrift, og skriftstørrelsen vil være 100 piksler for barneseksjonene. Det er på tide å bruke den ikke sveve egenskapen for barneseksjoner med en opacitet på 0.5. Denne HTML -koden er fullført, og vi vil utføre den i Chrome -nettleseren for å se hvordan Not Hover -eiendommen fungerer.
Utgang for denne HTML -koden er gitt nedenfor. Den viser at foreldreseksjonen også inneholder 5 barneseksjoner, men at bruken av ikke hiver eiendom for barnsøktene lar ikke fargen deres endre seg i det hele tatt.
Eksempel # 02:
La oss ta et annet eksempel på HTML for å se arbeidet med å ikke sveve eiendom på forskjellige elementer. Vi vil sette i gang denne illustrasjonen med den samme HTML- og hodekoden som inneholder tittelkoden i den. La oss se på kroppen på denne HTML -siden først. Innenfor kroppskoden har vi brukt en overskrift av største størrelse i HTML. Vi har brukt DIV -taggen for å opprette en ny seksjon på HTML -websiden vår. Denne DIV -delen vil inneholde noen ankerkoder for nettadresser og noen lister. Vi har brukt den første ankerkoden på hjemmeordet innenfor hoveddelen "Div" som omdirigerer oss til den for øyeblikket åpnede siden. Vi har startet en uordnet liste som inneholder en enkelt listeelement i den. Dette enkeltlisteelementet inneholder en ankerkode sammen med den uordnede listen over totalt 3 listeelementer. Disse listeelementene vil også referere til noen sosiale mediesider ved å bruke de tre listeelementene ankerkoder i "li" -liste -tagger av HTML. Alle disse tre ankerkodene er klassifisert som barn. Den uordnede listen over enkeltlisteelementene er stengt sammen med lukking av den ytre uordnede listen.
Nå skal vi se på stilkoden. Bakgrunnsfargen for hele DIV -delen er spesifisert som lysegrønn. Ankerkodene i denne delen har ingen tekstdekorasjon, men fargen ville være hvit og skriftstørrelsen ville være 25 piksler med en polstring på 15px. Displaystilen vil være inline-block. Den viktigste uordnede listen er spesifisert med inline -displayet, 0 marginer og 0.5-piksel polstring. En enkelt liste i en bestilt liste vises i et inline blokkformat.
Hoveregenskapen har blitt brukt til denne listen for å endre sin farge til grå ved sveving. Etter å ha brukt Hover -egenskapen, vises den uordnede listen i den som en inline -blokk. Stillingen er satt til absolutt. Bredden er satt til 200 piksler, og displayet er satt til ingen for den uordnede listen på den enkeltbestilte listen. For den bestilte listen på den uordnede listen har vi spesifisert bakgrunnsfargen og viser den som en blokk. Blokkskjermen for et anker ville være viktigst for å få prioritet.
De tre listene bruker også Hover -egenskapen med bakgrunn Blue. Ethvert element som er klassifisert som barn, vil bruke den ikke sveve egenskapen med opaciteten 0.3 og Crimson Color.
Når vi utfører denne koden, viser den den vist-belowutgangen med menylister hjemme og sosiale nettverk.
Når vi svever over "sosiale nettverk", ble det mer fremtredende og den bestilte listen ble vist.
Da han svevde over den bestilte listeartikelen, ble bakgrunnen endret til blått en stund med teksten hvit. Bruken av ikke: Hoveregenskap endrer ikke fargen på tekst.
Konklusjon
Denne artikkelen handlet om bruk av Not: Hover Property of CSS på noen HTML -elementer på en webside. Vi har diskutert to enkle og unike eksempler for å demonstrere dem på Visual Studio Code. Innenfor det første eksemplet har vi prøvd å bruke det på "Div" -elementet i HTML, og i det andre eksemplet har det blitt brukt på de uordnede og bestilte listene over HTML. Begge eksemplene er ganske forskjellige fra hverandre, men dekker det samme konseptet for begge.