Kaskadni stilski listovi (CSS) dizajnirani su pomoću ili XML (uključujući XHTML, SVG) format. To je jezik tablice stilova koji se primarno koristi za opisivanje elemenata kroz raznolike serije metoda oblikovanja. Jedna od metoda je lebdenje i u ovom ćemo članku shvatiti Hover u CSS-u na sljedeći način:

• Što je Hover u CSS-u?
• Gdje se koristi Hover?
• Što Hover radi?
• Kompatibilnost
• Kako radi?
• Promijenite boju pozadine lebdenja u 'Crvenu'
• Stvaranje neprozirnosti miša na slikama
• Stvaranje prekrivanja teksta na slikama

Što je Hover u CSS-u?

CSS lebdenje je komponenta selektora koja se koristi za oblikovanje različitih elemenata kada pokazivač miša lebdi iznad njih. Mogu se koristiti na gotovo svakom HTML elementu. Značajka lebdenja u CSS-u ima značajnu važnost u dizajniranju web stranica.

Komponenta lebdenja može istaknuti, kodirati i prilagoditi web stranice prema željama korisnika u kompaktnom i učinkovitom programu za web dizajniranje.

Gdje se koristi Hover?

Najčešći primjeri održivosti značajke lebdenja mogu se istaknuti na glavnim web lokacijama za kupnju poput Flipkarta i Amazona. Kada korisnici zadrže pokazivač miša na bilo kojem proizvodu na ovim web stranicama e-trgovine, proizvod je programiran da izvrši funkciju automatskog zumiranja lebdenja kako bi kupcu pružio bolji pogled na njihove odabrane proizvode. Kroz ovo programiranje, web stranica je dizajnirana za prikaz kompaktnog prikaza cjelokupnog asortimana, popraćenog detaljnim prikazom proizvoda od interesa u dizajnu pojedine web stranice.

Što Hover radi?

Hover je višenamjenski alat za programiranje putem kojeg korisnik može prilagoditi ciljni element s beskrajnim brojem kriterija formatiranja. Neki primjeri operativnog znanja o značajci lebdenja uključuju:

• Promjena boje pozadine / fonta
• Ugrađivanje skrivenog teksta koji se prikazuje na pokazivaču miša
• Stvorite efekte prenošenja na slikama
• Automatsko zumiranje teksta / slika
• Izmijenite neprozirnost slike
• Ugrađivanje teksta
• Zamjena slike
• Div. Lebdjeti
• Više drugih operacija oblikovanja CSS lebdjenja.

Učinak lebdenja u osnovi mijenja vrijednost svojstva elementa kako bi omogućio animiranje promjena navedenog teksta / slike ili odgovarajućih elemenata. Ugrađivanje CSS elemenata lebdenja u dizajn web stranice pretvara uobičajenu web stranicu u interaktivnu, robusnu i vrlo funkcionalnu web stranicu. Ovi dizajni web stranica su jednostavni za upotrebu i sveobuhvatni. Web stranice dizajnirane lebdjelicom sadrže veću privlačnost potrošača i privlače obavijest potencijalnih kupaca.

Kompatibilnost Hovera u CSS-u

Značajka lebdenja kompatibilna je sa svim glavnim web preglednicima. Međutim, primjena ovog elementa na dodirnim uređajima i dalje je izazovan zadatak. Lebdenje u CSS-u omogućuje pristup sadržaju na uređajima koji ne podržavaju funkcije lebdenja. Primijećeno je da se aktivirana funkcija lebdenja na uređaju koji ne podržava može zaglaviti na uređaju.

Zbog toga je vitalni prikaz presudnog sadržaja blokiran zbog problema s oblikovanjem. S jedne strane, gdje element lebdenja u CSS programu doprinosi velikoj razini učinkovite personalizacije web stranica, obrnuto, njegova operativnost na mobilnim uređajima vrlo je uspavana. Kapitulirajući u okolnostima u kojima svijet informacijske tehnologije postaje znatno mobilan, značajka lebdenja riskira zastarjeti s tehnološkim napretkom. Stoga je potreba za izradom prijenosne ugrađene značajke koja radi s dodirnim i mobilnim uređajima izuzetno bitna.

pretvoriti dvostruko u int

Kako Hover radi u CSS-u?

Aktivni stil pseudo-klase dominantan je u oblikovanju CSS hover-a i nadjačava bilo koju / sve sljedeće veze koje slijedi ova pseudo-klasa. Na primjer, u pseudo-klasi “: link: posjetio, ili: aktivan: pravilo hover mora biti postavljeno nakon: link i: posjećeno, ali prije: aktivno za odgovarajući: hover styling. LVHA-redoslijed:: link,: hover,: posjetio i: active koristi se kao referenca za pravilan: hover oblikovanje stila.

div {boja pozadine: zelena podloga: 18px prikaz: nema} raspon: lebdenje + div {prikaz: blok}Test lebdenja!Skriveni kod prikazuje se pri zadržavanju pokazivača miša

U gore navedenom kodu element span je modificiran tako da spaja element lebdenja i div upotrebom elementa span: hover + div. Element raspona koji će se prikazati na primarnoj odredišnoj web stranici prikazivat će tekst 'Test lebdenja!' Dalje lebdenje na elementu raspona otkriva div element 'Skriveni kod prikazuje se pri lebdenju'. Ovaj format ugrađivanja operira na tekstu kao i na slikama.

dobiti duljinu niza js

Promijenite boju pozadine lebdenja u 'Crvenu'

p: hover, h1: hover, a: hover {background-color: Red}
Lebdi crveno
 
Lebdi crveno
 
Veze:
 
Crveni test lebdenja:
  Google com  
  Bilješka: zdravo
 

Gornji kod prilagođava

,

i element i integrira ih u zajedničku funkciju lebdenja. Ovaj je kod dizajniran za promjenu boje teksta u crvenu kada pokazivač miša lebdi iznad njih. Komponenta h1 i h2 prikazuje 'CSS: Kôd za ispitivanje lebdjenjem', odnosno 'Hover Red'. Element odlomka: Testiranje pokazivača iznad crvene boje i oznaka sidra: google.com postaje crveno označen kad pokazivač miša pređe iznad njih.

Stvaranje neprozirnosti miša na slikama

.pic {širina: 1900px visina: 1900px neprozirnost: 1 filter: alfa (neprozirnost = 100) pozadina: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) bez ponavljanja} .pic: hover {neprozirnost: 0,2 filtar: alfa (neprozirnost = 30)}

Gornji CSS program prikazuje promjenu neprozirnosti slike pri lebdenju. Izvorna neprozirnost slike je jedan međutim, korištenjem filtra za zadržavanje neprozirnosti isti je modificiran na 0,2. Ovaj kod pokazuje da se pomoću elementa hover može izmijeniti neprozirnost slike i / ili teksta.

Stvaranje prekrivanja teksta na slikama

.pic {širina: 4000px visina: 2170px pozadina: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {širina: 3400px visina: 2170px pozadina: #FFF neprozirnost: 0} .pic: hover .text {neprozirnost: 0,6 poravnanje teksta: opravdati boju: # 000000 veličina fonta: 20px težina fonta: 700 porodica fontova: 'Times New Roman', Times, serif podmetač: 30px} Narančasta je vlakno bogato voće. Antioksidanti prisutni u naranči mogu pomoći u probavi, učiniti kožu sjajnom i djelovati kao anti-age element.

Slojevitost teksta u CSS hover učinkovit je alat za ugradnju opisnog teksta slike u samu sliku. Ovaj alat pomaže u kompaktnom pregledu slike bez zauzimanja uspavanog prostora u ograničenom prostoru za web dizajn. U ovom je kodu pozadinska slika ugrađena s opisnim tekstom koji se prikazuje kada pokazivač miša lebdi iznad teksta.

Ovim su zaključeni svi važni aspekti lebdenja u CSS-u i naglašena njegova upotrebljivost u web razvoju. Mnogo je specijalnih efekata koje može unijeti na naše web stranice. Uvijek možemo isprobati različite kombinacije selektora za hover s drugim CSS svojstvima poput animacije, pozadinskih slika, hiperveza itd. I istražiti njegov potencijal kao što smo vidjeli u nekim našim primjerima. Konačno, CSS je jedan od najsnažnijih načina dizajniranja i transformiranja web stranica, pa je stoga web programerima neophodno da steknu ovu vještinu kako bi stvorili dinamične web stranice.

Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare bloga 'Lebdenje u CSS-u', a mi ćemo vam se javiti.