Nupp on klõpsatav element, mida kasutatakse konkreetse toimingu tegemiseks. CSS-i abil saate määrata erinevaid nuppude stiile, millest üks on nupu värvi muutmine klõpsamisel. Nupu värvi saab määrata CSS-i abil : aktiivne ” pseudoklass.
See ajaveeb õpetab teile klõpsamisel nupu värvi muutmise protseduuri. Selleks tutvuge esmalt :active pseudoklassiga.
Niisiis, alustame!
Mis on CSS-is ':active'?
Nupu värvi muutmine klõpsamisel CSS-is on võimalik ' : aktiivne ” pseudoklass. HTML-is tähistab see elementi, mis aktiveeritakse, kui kasutaja sellel klõpsab. Veelgi enam, hiire kasutamisel algab aktiveerimine hiireklahvi vajutamisel.
Süntaks
a : aktiivne {
värvi : roheline ;
}
“ a ” viitab HTML-i elemendile, millele :active klass rakendatakse.
Suundume näite juurde, et mõista esitatud kontseptsiooni.
Kuidas CSS-is klõpsamisel nupu värvi muuta?
Nupu värvi muutmiseks klõpsamisel looge esmalt HTML-faili nupp ja määrake klassi nimi ' btn ”.
HTML
< keha >< nuppu klass = 'btn' > Nupp < / nuppu >
< / keha >
Järgmisena määrake CSS-is nupu värv. Selleks kasutame ' .btn ', et pääseda juurde nupule ja määrata nupu värviks ' rgb(0, 255, 213) ”.
CSS
.btn {taustavärv : rgb ( 0 , 255 , 213 ) ;
}
Pärast seda rakendage nupul :active pseudo-class kui ' .btn:active ” ja määrake aktiivses olekus kuvatava nupu värviks „ rgb(123, 180, 17) ”:
.btn : aktiivne {taustavärv : rgb ( 123 , 180 , 17 ) ;
}
See näitab järgmist tulemust:
Nüüd lisame pealkirja
sildi ja nupu klassi nimega ' nuppu ”, märgendi sees.
HTML
< Keskus >
< h1 > Muuda nupu värvi < / h1 >
< nuppu klass = 'nupp' > Klõpsake Mina < / nuppu >
< / Keskus >
Järgmisena liigume CSS-i, kujundame nupu stiili ja rakendame sellele :active. Selleks määrame ääriste stiiliks ' mitte ühtegi ' ja andke polsterdus kui ' 15 pikslit ”. Pärast seda määrake nupu teksti värviks ' rgb(50, 0, 54) ' ja selle taust on ' rgb(177, 110, 149) ja selle raadius on ' 15 pikslit ”:
.nupp {
piir : mitte ühtegi ;
polsterdus : 15 pikslit ;
värvi : rgb ( viiskümmend , 0 , 54 ) ;
taustavärv : rgb ( 177 , 110 , 149 ) ;
piiri raadius : 15 pikslit ;
}
See näitab järgmist tulemust:
Pärast seda rakendame nupule aktiivse pseudoklassi kui ' .button:aktiivne ja määrake nupu värviks ' rgb(200, 255, 0) ”:
.nupp : aktiivne {
taustavärv : rgb ( 200 , 255 , 0 ) ;
}
Kui olete kogu ülaltoodud koodi rakendanud, minge HTML-faili ja käivitage see tulemuse kontrollimiseks:
Väljundist on näha, kui nupule klõpsata, selle värv muutub vastavalt määratud RGB värvikoodile.
Järeldus
Nupu värvi muutmiseks klõpsamisel CSS-is tuleb „ : aktiivne ” saab kasutada pseudoklassi. Täpsemalt võib see aktiveerimisel tähistada nupuelementi. Seda klassi kasutades saab määrata erinevaid nuppude värve, kui sellel hiireklõps klõpsab. Selles artiklis selgitati nuppude värvi muutmise protseduuri CSS-is klõpsamisel.
HTML
< Keskus >< h1 > Muuda nupu värvi < / h1 >
< nuppu klass = 'nupp' > Klõpsake Mina < / nuppu >
< / Keskus >
Järgmisena liigume CSS-i, kujundame nupu stiili ja rakendame sellele :active. Selleks määrame ääriste stiiliks ' mitte ühtegi ' ja andke polsterdus kui ' 15 pikslit ”. Pärast seda määrake nupu teksti värviks ' rgb(50, 0, 54) ' ja selle taust on ' rgb(177, 110, 149) ja selle raadius on ' 15 pikslit ”:
.nupp {piir : mitte ühtegi ;
polsterdus : 15 pikslit ;
värvi : rgb ( viiskümmend , 0 , 54 ) ;
taustavärv : rgb ( 177 , 110 , 149 ) ;
piiri raadius : 15 pikslit ;
}
See näitab järgmist tulemust:
Pärast seda rakendame nupule aktiivse pseudoklassi kui ' .button:aktiivne ja määrake nupu värviks ' rgb(200, 255, 0) ”:
.nupp : aktiivne {taustavärv : rgb ( 200 , 255 , 0 ) ;
}
Kui olete kogu ülaltoodud koodi rakendanud, minge HTML-faili ja käivitage see tulemuse kontrollimiseks:
Väljundist on näha, kui nupule klõpsata, selle värv muutub vastavalt määratud RGB värvikoodile.
Järeldus
Nupu värvi muutmiseks klõpsamisel CSS-is tuleb „ : aktiivne ” saab kasutada pseudoklassi. Täpsemalt võib see aktiveerimisel tähistada nupuelementi. Seda klassi kasutades saab määrata erinevaid nuppude värve, kui sellel hiireklõps klõpsab. Selles artiklis selgitati nuppude värvi muutmise protseduuri CSS-is klõpsamisel.