Hvordan legge til inline CSS -stiler på svevet

“:sveve”Er pseudo-selektor som betyr at den bare gjenkjennes i CSS-stilarket. Brukere har ikke lov til å bruke CSS -inline -stiler på Hover. For å legge til inline CSS på Hover, er det imidlertid bedre å gi elementet et klassenavn eller ID og deretter bruke det i stilarket for å bruke stiler eller bruke JavaScript -funksjoner.

Denne oppskrivningen vil instruere deg om å legge til CSS-stiler på Hover ved hjelp av JavaScript.

Hvordan legge til CSS -stiler på svevet?

Det er ingen metoder å bruke svev i inline CSS. For å anvende sveveeffekten på et element ved å bruke IDen, kan du sjekke ut det gitte eksemplet.

Eksempel

I HTML, legg til et DIV -element som har klassenavnet “hovedinnhold”. Inne i denne diven, legg til en "

”Element for å spesifisere overskriften. Etter det, legg til “”Element med noe innhold som er spesifisert med attributtene:

• • “href”Attributt spesifiserer lenken.
  • “id”Attributt er satt til å gjøre det tilgjengelig for CSS.
  • Spesifiser også funksjonene "mus over()”Og“mus_out ()" i det. På mushverdømmen vil disse funksjonene utløse og påkalle funksjonen i JavaScript:

Legg til svev i inline CSS

Linuxhint School!

La oss gå videre til CSS -delen, der HTML -elementene er utstyrt med stylingegenskaper.

Stil kroppselement

kropp
Bakgrunnsfarge: #863A6F;

Bakgrunnsfargen på kroppselementet er satt ved hjelp av “bakgrunnsfarge”Eiendom.

Stil hovedinnhold Div

.hovedinnhold
Bredde: 400px;
Høyde: 100px;
Bakgrunnsfarge: #D989B5;
Margin: Auto;
polstring: 20px;
Border-Radius: 10px;

“.hovedinnhold ”Henviser til klassens hovedinnhold, som er stylet som følger:

• • “bredde”Eiendom setter HTML -elementets bredde.
  • “høyde”Eiendom definerer HTML -elementets høyde.
  • “bakgrunnsfarge”Eiendom spesifiserer elementets bakgrunnsfarge.
  • “margin”Eiendom setter plassen over elementet.
  • “polstring”Eiendom setter plassen på tvers av elementets innhold.
  • “Border-Radius”Eiendom brukes til å runde elementets kanter.

Stilelement

A
Font-størrelse: 20px;
Tekstdekorasjon: Ingen;
polstring: 10px;

“”Element er stylet ved å bruke følgende egenskaper:

• • “skriftstørrelse”Eiendom spesifiserer elementets skriftstørrelse.
  • “tekstdekorasjon”Eiendom med verdi ingen fjerner understreken fra teksten.

JavaScript

I den gitte JavaScript -koden:

• • “”Tag brukes til å spesifisere skriptkoden.
  • “funksjon mus_over ()”: Funksjonen er nøkkelordet for å definere Mouse_over () -funksjonen.
  • “dokument.getElementById (“Hov”).stil.farge = “gul””Tar ID”Hov”Av elementet som en parameter og setter sin stilfarge som gul.
  • “funksjon mus_out ()”Bruker“dokument.getElementById (“Hov”).stil.farge = “hvit””Metode for å ta ID”Hov" av "”Element som en parameter som stilfargen skal endres til hvitt.
  • “”Er det lukkende taggen.

Her kan du se, på svevet, tekstfargestilen endres til gul, og når den fjernes, blir tekstfargen til hvit:

Det er måten å bruke CSS -stiler på svevet.

Konklusjon

“:sveve”Er pseudo-selektor som bare betyr i CSS er den anerkjent. Det eksisterer ingen metoder for å legge til inline CSS -stiler på svevet. Så det er bedre å bruke JavaScript -funksjoner for å spesifisere egenskapene på musens svev over et element. Dette innlegget har vist metoden for å legge til CSS -stiler på svevet.