Kuidas hõljutust CSS-is juurutada koos näidetega



See artikkel annab teile üksikasjalikud ja põhjalikud teadmised selle kohta, kuidas hõljuki CSS-is juurutada koos näidetega.

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?

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.





Hõljutage kursorit CSS-is

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 com

Märge: Tere

Ülaltoodud kood kohandab

,

ja element ja integreerib need ühisesse hõljumisfunktsiooni. See kood on loodud selleks, et muuta teksti värv punaseks, kui hiirekursor nende kohal hõljub. Komponentidel h1 ja h2 kuvatakse vastavalt „CSS: Hover Test Code” ja „Hover Red”. Lõiguelement: Hõljutage testi punast ja ankurmärgend: google.com tõstetakse punasega esile, kui hiirekursor nende kohal hõljub.

Piltide hõljuki läbipaistmatuse loomine

.pic {width: 1900px height: 1900px läbipaistmatus: 1 filter: alfa (läbipaistmatus = 100) taust: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hõljutage kursorit {läbipaistmatus: 0,2 filter: alfa (läbipaistmatus = 30)}

Ülaltoodud CSS-programm kuvab hõljumisel pildi läbipaistmatuse modifikatsiooni. Pildi algne läbipaistmatus on üks Kuid läbipaistmatuse hõljukfiltrit kasutades on see muudetud väärtusele 0,2. See kood näitab, et hõljutuselementi kasutades saab muuta pildi ja / või teksti läbipaistmatust.

Piltidele teksti ülekatte loomine

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width: 3400px height: 2170px background: #FFF opacity: 0} .pic: hover .text {läbipaistmatus: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Oranž on kiud rikkalik vili. Apelsinis sisalduvad antioksüdandid võivad aidata seedimist, muuta naha kuma ja toimida vananemisvastase elemendina.

CSS-i hõljutuse tekstikihtimine on tõhus vahend pildi kirjeldava teksti sisestamiseks pildi enda sisse. See tööriist aitab pakkuda kompaktset ülevaadet pildist, ilma et see võtaks piiratud veebikujundusruumis seisvat ruumi. Selles koodis on taustpilt varjatud kirjeldava tekstiga, mis kuvatakse siis, kui hiirekursor hõljutab teksti kohal.



millist ideed Java jaoks kasutada

Sellega lõpetatakse CSS-is hõljumise kõik olulised aspektid ja tõstetakse esile selle kasutatavust veebiarenduses. Meie veebilehtedele võib see tuua palju eriefekte. Saame alati proovida hõljutusvalija erinevaid kombinatsioone teiste CSS-i omadustega, nagu animatsioon, taustapildid, hüperlingid jne, ja uurida selle potentsiaali, nagu nägime mõnes meie näites. Lõpuks, CSS on üks võimsamaid viise veebilehtede kujundamiseks ja muutmiseks ning seetõttu on veebiarendajatel peagi vaja omandada see oskus dünaamiliste veebilehtede loomiseks.

Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagatipuliste ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.

Kas teil on meile küsimus? Palun mainige seda ajaveebi „Hõljutage CSS-is” kommentaaride jaotises ja me võtame teiega ühendust.