Kaskaadstiililehed (CSS) on loodud või XML-vormingus (sh XHTML, SVG). See on stiililehe keel, mida kasutatakse peamiselt elementide kirjeldamiseks mitmesuguste vormindamismeetodite seeria kaudu. Üks meetoditest hõljub ja selles artiklis mõistame hõljumist CSS-is järgmisel viisil:
- Mis on CSS-is hõljutus?
- Kus kasutatakse hõljukit?
- Mida Hover teeb?
- Ühilduvus
- Kuidas see töötab?
- Hõljutage kursorit taustavärvi muutmiseks “punaseks”
- Piltide hõljuki läbipaistmatuse loomine
- Piltidele teksti ülekatte loomine
Mis on CSS-is hõljutus?
CSS hover on valijakomponent, mida kasutatakse erinevate elementide kujundamiseks, kui hiirekursor hõljub nende kohal. Neid saab kasutada peaaegu igas HTML-elemendis. CSS-i hõljumisfunktsioon omab veebilehtede kujundamisel olulist tähtsust.
trimmi () javas
Hõljutava komponendiga saab kompaktses ja mõjusas veebikujundusprogrammis veebilehti esile tõsta, kodeerida ja kohandada vastavalt kasutaja eelistustele.
Kus kasutatakse hõljukit?
Levinumaid näiteid hõljumisfunktsiooni elujõulisusest saab välja tuua suurematel ostusaitidel, näiteks Flipkart ja Amazon. Kui kasutajad hõljuvad nende e-kaubanduse veebisaitide mis tahes toote kohal, on toode programmeeritud täitma automaatse suumimise hõljumise funktsiooni, et klient saaks paremini oma valitud tooteid vaadata. Selle programmeerimise kaudu on veebileht kavandatud kuvama kogu tootevaliku kompaktset vaadet koos üksikasjaliku vaatega huvipakkuvale tootele ühe veebilehe kujunduses.
Mida Hover teeb?
Hõljur on multifunktsionaalne programmeerimistööriist, mille kaudu saab kasutaja sihtelementi kohandada lõputu hulga vormindamiskriteeriumidega. Mõned hõljumisfunktsiooni tööalase oskusteabe juhtumid hõlmavad järgmist.
- Taust / fondi värvi muutmine
- Hõljutatud varjatud teksti manustamine
- Looge piltidele üleminekuefektid
- Automaatne suum tekstil / piltidel
- Muuda pildi läbipaistmatust
- Teksti manustamine
- Pildivahetus
- Div. Hõljuma
- Mitu muud CSS-hõljutuse vormindamise toimingut.
Hõljusefekt muudab põhimõtteliselt elemendi atribuudi väärtust, et võimaldada animeeritud muudatusi määratud tekstile / pildile või vastavatele elementidele. CSS-i hõljutuselementide kinnistamine veebilehe kujundusse muudab tavalise veebilehe interaktiivseks, jõuliseks ja väga funktsionaalseks veebileheks. Need veebilehtede kujundused on kasutajasõbralikud ja terviklikud. Hõljutatud kujundusega veebilehtedel on suurem tarbijate huvi ja need meelitavad potentsiaalseid kliente sellest teavitama.
Hõljuri ühilduvus CSS-is
Hõljumise funktsioon ühildub kõigi suuremate veebibrauseritega. Kuid selle elemendi rakendamine puuteseadmetes on endiselt keeruline ülesanne. CSS-is hõljutamine hõlbustab sisu juurdepääsetavust seadmetes, mis ei toeta hõljutamise funktsioone. On täheldatud, et mittetoetava seadme aktiveeritud hõljutusfunktsioon võib seadme külge kinni jääda.
Sellest tulenevalt on vormingu probleem blokeeritud üliolulise sisu ülioluline kuvamine. Ühest küljest, kui CSS-programmi hõljutuselement aitab veebilehtedel tõhusalt isikupärastada, on selle töö mobiilseadmetes väga vaikne. Andes järele olukorrale, kus infotehnoloogia maailm kasvab oluliselt liikuvaks, võib hõljumisfunktsioon tehnoloogia arenguga vananeda. Seetõttu on ülitähtis vajadus luua kaasaskantav sisseehitatud funktsioon, mis töötab puutetundlike ja mobiilseadmetega.
php teisendab massiivi objektiks
Kuidas hõljuk CSS-is töötab?
CSS-i hõljutuse vormindamisel on domineeriv aktiivne pseudoklassi stiil ja see alistab kõik / kõik järgnevad lingid, millele see pseudoklass järgneb. Näiteks pseudoklassi “: link: külastatud või: aktiivne: hoveri reegel tuleb paigutada pärast: link ja: visit, kuid enne: aktiivne sobivaks: hoveri stiil. Õige: hõljumise vormindamise stiili jaoks kasutatakse viidetena LVHA-järjestust:: link,: hõljutus,: külastatud ja: aktiivne.
div {taustavärv: roheline polster: 18px display: none} span: hover + div {display: block}Hõljutav test!Peidetud kood kuvatakse kursori kohal
Ülaltoodud koodis on span-element modifitseeritud hõljumise ja div-elementide ühendamiseks, kasutades span: hover + div-elementi. Esmasel sihtleheküljel kuvatav span-element näitab teksti „Hover test!” Edasisel hõljutusel span-elemendil ilmub div-element “Peidetud kood kuvatakse hõljukil”. See kinnistamisvorming sobib nii tekstile kui ka piltidele.
Hõljutage kursorit taustavärvi muutmiseks “punaseks”
p: hover, h1: hover, a: hover {taustavärv: punane}Hõljutage punast
Hõljutage punast
Lingid:
Hõljutav test punane:
Google comMärge: Tere
Ülaltoodud kood kohandab
,