Kako z primeri uporabiti Hover v CSS



V tem članku boste našli podrobno in izčrpno znanje o tem, kako z primeri vključiti Hover v CSS.

Cascading Style Sheets (CSS) so zasnovani z uporabo ali XML (vključno z XHTML, SVG). To je jezik slogovnih listov, ki se v glavnem uporablja za opis elementov z različnimi vrstami oblik oblikovanja. Ena od metod je lebdenje in v tem članku bomo Hover v CSS razumeli na naslednji način:

Kaj je Hover v CSS?

CSS hover je izbirna komponenta, ki se uporablja za oblikovanje različnih elementov, ko miškin kazalec lebdi nad njimi. Uporabljajo se lahko na skoraj vseh elementih HTML. Funkcija lebdenja v CSS ima velik pomen pri oblikovanju spletnih strani.





Premaknite miškin kazalec v CSS

kako uporabljati programsko opremo sas

Lebdeča komponenta lahko v kompaktnem in učinkovitem programu za spletno oblikovanje poudari, kodira in prilagodi spletne strani po želji uporabnika.



Kje se uporablja Hover?

Najpogostejši primeri preživetja funkcije lebdenja so lahko poudarjeni na večjih nakupovalnih spletnih mestih, kot sta Flipkart in Amazon. Ko uporabniki na teh spletnih mestih e-trgovine lebdijo nad katerim koli izdelkom, je izdelek programiran tako, da izvede funkcijo samodejnega lebdenja z zoomom, da kupcu omogoči boljši pogled na izbrane izdelke. S tem programiranjem je spletna stran zasnovana tako, da prikazuje kompaktni pogled na celotno paleto izdelkov, skupaj s podrobnim pogledom na izdelek, ki nas zanima, v enem samem oblikovanju spletne strani.

Kaj počne Hover?

Hover je večnamensko programsko orodje, s pomočjo katerega lahko uporabnik ciljni element prilagodi z neskončnim številom meril za oblikovanje. Nekateri primeri operativnega znanja funkcije lebdenja vključujejo:

  • Spreminjanje barve ozadja / pisave
  • Vstavljanje skritega besedila, ki se prikaže na miški
  • Ustvari učinke prenosa na slike
  • Avtomatizirano povečanje besedila / slik
  • Spremenite motnost slike
  • Vdelava besedila
  • Zamenjava slike
  • Div. Lebdi
  • Več drugih operacij formatiranja lebdenja CSS.

Učinek lebdenja v bistvu spremeni vrednost lastnosti elementa, da omogoči animiranje sprememb navedenega besedila / slike ali ustreznih elementov. Vdelava elementov lebdenja CSS v zasnovo spletne strani spremeni običajno spletno stran v interaktivno, robustno in zelo funkcionalno spletno stran. Te zasnove spletnih strani so uporabniku prijazne in celovite. Spletne strani, oblikovane s hoverjem, vsebujejo večjo privlačnost potrošnikov in vabijo k obvestilu potencialnih strank.



Združljivost Hoverja v CSS

Funkcija lebdenja je združljiva z vsemi glavnimi spletnimi brskalniki. Vendar pa je izvajanje tega elementa na napravah na dotik še vedno zahtevna naloga. Lebdenje v CSS omogoča dostop do vsebine v napravah, ki ne podpirajo funkcij lebdenja. Opazili so, da se aktivirana funkcija lebdenja na nepodporni napravi lahko zatakne na napravi.

Posledično je ključni prikaz ključne vsebine zaradi težave s formatiranjem blokiran. Po eni strani, ko lebdeči element v programu CSS prispeva veliko raven učinkovite personalizacije spletnih strani, nasprotno pa njegova operativnost na mobilnih napravah zelo miruje. Kapituliranje pred okoliščinami, ko svet informacijske tehnologije postaja precej mobilen, lahko lebdi s stanjem tehnološkega napredka zastarela. Zato je potreba po izdelavi prenosne vdelane funkcije, ki deluje z dotikom in mobilnimi napravami, izjemno pomembna.

kaj je omejitev primarnega ključa

Kako Hover deluje v CSS?

Aktivni slog psevdo-razreda prevladuje pri oblikovanju lebdenja CSS in preglasi katero koli / vse nadaljnje povezave, ki jim sledi ta psevdo-razred. Na primer, v psevdorazredu:: link: obiskana ali: active pravilo: hover je treba postaviti za: link in: obiskan, vendar prej: active za ustrezen: hover styling. Naročilo LVHA:: link,: hover,: obiskano in: active je uporabljeno kot referenca za ustrezen slog oblikovanja hover.

div {color-background: green padding: 18px display: none} span: hover + div {display: block}Preskus lebdenja!Skrivena koda se prikaže pri lebdenju

V zgornji kodi je element span spremenjen tako, da združi element hover in div z uporabo elementa span: hover + div. Element razpona, ki se bo prikazal na primarni ciljni spletni strani, bo prikazal besedilo »Test lebdenja!« Nadaljevanje lebdenja na elementu razpona razkrije element div »Skrita koda se prikaže pri lebdenju«. Ta oblika vdelave deluje tako v besedilu kot na slikah.

Premaknite barvo ozadja na rdečo

p: hover, h1: hover, a: hover {background-color: Red}

Lebdite rdeče

Lebdite rdeče

Povezave:

Hover Test Red:

Google com

Opomba: zdravo

Zgornja koda prilagodi

,

in element in jih integrira v skupno funkcijo lebdenja. Ta koda je zasnovana tako, da spremeni barvo besedila v rdečo, ko miškin kazalec lebdi nad njimi. Komponenta h1 in h2 prikazuje “CSS: Hover Test Code” oziroma “Hover Red”. Element odstavka: preizkus lebdenja rdeče in sidrna oznaka: google.com postane rdeče označen, ko miškin kazalec miške premakne nad njih.

Ustvarjanje motnosti miške na slikah

.pic {širina: 1900px višina: 1900px motnost: 1 filter: alfa (motnost = 100) ozadje: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {motnost: 0,2 filter: alfa (motnost = 30)}

Zgornji program CSS prikazuje spreminjanje motnosti slike pri lebdenju. Prvotna motnost slike je eno vendar je bil z uporabo filtra za motnost lebdenja spremenjen na 0,2. Ta koda prikazuje, da lahko z uporabo lebdečega elementa spremenimo motnost slike in / ali besedila.

Ustvarjanje prosojnice besedila na slikah

.pic {širina: 4000px višina: 2170px ozadje: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {širina: 3400px višina: 2170px ozadje: #FFF motnost: 0} .pic: hover .text {neprosojnost: 0,6 poravnava besedila: utemelji barvo: # 000000 velikost pisave: 20px teža pisave: 700 družina pisav: 'Times New Roman', Times, oblazinjenje serifa: 30px} Oranžna je vlakna bogato sadje. Antioksidanti, prisotni v pomaranči, lahko pomagajo pri prebavi, poskrbijo, da se koža zažari in delujejo kot anti-age element.

Plastiranje besedila v CSS hover je učinkovito orodje za vdelavo opisnega besedila slike v samo sliko. To orodje pomaga pri kompaktnem pregledu slike, ne da bi zavzelo mirujoč prostor v omejenem prostoru za spletno oblikovanje. V tej kodi je slika za ozadje vdelana z opisnim besedilom, ki se prikaže, ko miškin kazalec miške pade nad besedilo.



kako napisati tostring metodo v javi

S tem zaključimo vse pomembne vidike lebdenja v CSS in poudarimo njegovo uporabnost pri spletnem razvoju. Obstaja veliko posebnih učinkov, ki jih lahko prinese na naše spletne strani. Vedno lahko preizkusimo različne kombinacije izbirnika lebdenja z drugimi lastnostmi CSS, kot so animacija, slike v ozadju, hiperpovezave itd., In raziščemo njegov potencial, kot smo videli v nekaterih naših primerih. Nazadnje je CSS eden najmočnejših načinov za oblikovanje in preoblikovanje spletnih strani, zato spletni razvijalci neizogibno pridobijo to spretnost za izdelavo dinamičnih spletnih strani.

Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnega projekta. To usposabljanje vam omogoča, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.

Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje bloga 'Lebdite v CSS' in se bomo oglasili.