Kaskadinio stiliaus lapai (CSS) yra sukurti naudojant arba XML (įskaitant XHTML, SVG) formatą. Tai stiliaus lapo kalba, pirmiausia naudojama elementams apibūdinti naudojant įvairias formatavimo metodų serijas. Vienas iš būdų yra pakibęs ir šiame straipsnyje mes suprasime „Hover“ CSS tokiu būdu:

• Kas yra pelės žymeklis CSS?
• Kur naudojamas žymeklis?
• Ką veikia „Hover“?
• Suderinamumas
• Kaip tai veikia?
• Užveskite pelės žymeklio fono spalvą į „raudona“
• Vaizdo žymeklio neskaidrumo sukūrimas
• Vaizdo teksto perdangos kūrimas

Kas yra pelės žymeklis CSS?

CSS svyravimas yra selektoriaus komponentas, naudojamas skirtingų elementų stiliui kurti, kai pelės žymeklis užveda juos. Jie gali būti naudojami beveik kiekviename HTML elemente. CSS žymeklio funkcija turi didelę reikšmę kuriant tinklalapius.

Kompiuteris su žymekliu gali paryškinti, užkoduoti ir tinkinti tinklalapius pagal vartotojo pageidavimus kompaktiškoje ir efektyvioje interneto dizaino programoje.

Kur naudojamas žymeklis?

Dažniausius „hover“ funkcijos gyvybingumo pavyzdžius galima išryškinti pagrindinėse prekybos svetainėse, tokiose kaip „Flipkart“ ir „Amazon“. Kai vartotojai užveda pelės žymeklį ant bet kurio produkto šiose el. Prekybos svetainėse, produktas užprogramuotas atlikti automatinio mastelio keitimo funkciją, kad klientas geriau matytų pasirinktus produktus. Naudojant šį programavimą, tinklalapis sukurtas taip, kad būtų rodomas kompaktiškas viso gaminių asortimento vaizdas, kartu pateikiant išsamų dominančio produkto vaizdą viename tinklalapio dizaine.

Ką veikia „Hover“?

„Hover“ yra daugiafunkcinis programavimo įrankis, per kurį vartotojas gali pritaikyti tikslinį elementą su begaliniu formatavimo kriterijų skaičiumi. Kai kurie žymeklio funkcijos naudojimo praktinės patirties pavyzdžiai yra šie:

• Fono / šrifto spalvos keitimas
• Paslėpto teksto, kuris rodomas ant pelės žymeklio, įdėjimas
• Sukurkite paveikslėlių keitimo efektus
• Automatinis teksto / vaizdų mastelis
• Keisti vaizdo neskaidrumą
• Teksto įdėjimas
• Vaizdo keitimas
• Div. Užveskite pelės žymeklį
• Kelios kitos CSS žymeklio formatavimo operacijos.

„Hover“ efektas iš esmės pakeičia elemento savybės vertę, kad būtų galima animuoti nurodyto teksto / vaizdo ar atitinkamų elementų pakeitimus. Įterpiant CSS žymeklio elementus į tinklalapio dizainą, įprastas tinklalapis paverčiamas interaktyviu, tvirtu ir labai funkcionaliu tinklalapiu. Šie tinklalapių dizainai yra patogūs vartotojui ir išsamūs. Kuriant žymeklį sukurtuose tinklalapiuose vartotojai patraukliau ir jie vilioja potencialių klientų dėmesį.

„Hover“ suderinamumas CSS

„Hover“ funkcija suderinama su visomis pagrindinėmis interneto naršyklėmis. Tačiau šio elemento įdiegimas jutikliniuose įrenginiuose vis dar yra sudėtinga užduotis. CSS žymėjimas suteikia galimybę pasiekti turinį įrenginiuose, kurie nepalaiko pelės žymeklio funkcijos. Pastebėta, kad įjungta nepalaikančio prietaiso užvedimo funkcija gali užstrigti ant prietaiso.

Todėl formatavimo problema užblokuoja gyvybiškai svarbaus turinio rodymą. Viena vertus, kai pelės žymeklio elementas CSS programoje padeda efektyviai tinkinti tinklalapius, atvirkščiai, jo veikimas mobiliuosiuose įrenginiuose yra labai neveikiantis. Pasitaikius aplinkybėms, kai informacinių technologijų pasaulis iš esmės auga, svyravimo funkcija gali paseno dėl technologinės pažangos. Todėl labai svarbu sukurti nešiojamąją įterptąją funkciją, kuri veikia su liečiamaisiais ir mobiliaisiais įrenginiais.

Kaip „Hover“ veikia CSS?

Aktyvus pseudo klasės stilius yra dominuojantis CSS svyravimo formatavime ir jis pakeičia bet kurią / visas paskesnes nuorodas, kuriomis vadovaujasi ši pseudo klasė. Pavyzdžiui, pseudo klasėje „: nuoroda: aplankyta“ arba: aktyvi: „užveskite“ taisyklę reikia įdėti po: nuoroda ir: aplankyta, bet anksčiau: aktyvi, jei norite: „užveskite“. „LVHA-order“: „link“, „hover“, „visit“ ir „active“ yra naudojami kaip nuoroda į tinkamą: „hover“ formatavimo stilių.

kaip sudaryti java

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Testas su žymekliu!Paslėptas kodas rodomas ant žymeklio

Pirmiau pateiktame kode span elementas yra modifikuotas, kad sujungtų elementą „hover“ ir „div“, naudojant elementą „span: hover + div“. Tarpatramio elementas, kuris bus rodomas pagrindiniame nukreipimo tinklalapyje, parodys tekstą „Užveskite testą!“ Toliau užvedus ant span elemento, parodomas div elementas „Paslėptas kodas rodomas ant svyravimo“. Šis įterpimo formatas yra tinkamas tekstui ir vaizdams.

Užveskite pelės žymeklio fono spalvą į „raudona“

p: hover, h1: hover, a: hover {fono spalva: raudona}
Užveskite raudoną raudoną
 
Užveskite raudoną raudoną
 
Nuorodos:
 
„Hover Test Red“:
  „Google com“  
  Pastaba: Sveiki
 

Aukščiau pateiktas kodas tinkina

,

ir elementą ir integruoja juos į bendrą pelės žymeklio funkciją. Šis kodas skirtas pakeisti teksto spalvą į raudoną, kai pelės žymeklis užveda virš jų. „H1“ ir „h2“ komponentuose rodoma „CSS: Hover Test Code“ ir „Hover Red“. Pastraipos elementas: užveskite pelės žymeklį ant raudonos žymeklio ir inkaro žymos: google.com paryškinamas raudonai, kai pelės žymeklis užveda juos.

Vaizdo žymeklio neskaidrumo sukūrimas

.pic {plotis: 1900px aukštis: 1900px neskaidrumas: 1 filtras: alfa (neskaidrumas = 100) fonas: URL (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-pakartoti} .pic: užveskite pelės žymeklį {neskaidrumas: 0,2 filtras: alfa (neskaidrumas = 30)}

Pirmiau pateiktoje CSS programoje rodomas paveikslėlio nepermatomumo modifikavimas, kai jis užvedamas. Originalus vaizdo neskaidrumas yra vienas tačiau naudojant neskaidrumo svyravimo filtrą tas pats buvo pakeistas į 0,2. Šis kodas rodo, kad naudojant žymeklio elementą galima pakeisti vaizdo ir (arba) teksto neskaidrumą.

Vaizdo teksto perdangos kūrimas

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {plotis: 3400px aukštis: 2170px fonas: #FFF neskaidrumas: 0} .pic: hover .text {neskaidrumas: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Oranžinė yra pluoštas turtingi vaisiai. Apelsine esantys antioksidantai gali padėti virškinti, priversti odą spindėti ir veikti kaip senėjimą stabdantys elementai.

Teksto sluoksniavimas CSS žymeklyje yra efektyvus įrankis įterpiant aprašomąjį atvaizdo tekstą pačiame paveikslėlyje. Šis įrankis padeda pateikti kompaktišką vaizdo vaizdą, neužimant ramybės ribotoje internetinio dizaino erdvėje. Šiame kode foninis vaizdas yra įdėtas su aprašomuoju tekstu, kuris rodomas, kai pelės žymeklis užveda ant teksto.

Tai užbaigia visus svarbius CSS svyravimo aspektus ir pabrėžia jų tinkamumą kurti interneto svetaines. Yra daug specialiųjų efektų, kuriuos jis gali atnešti į mūsų tinklalapius. Mes visada galime išbandyti skirtingus žymeklio žymeklio derinius su kitomis CSS savybėmis, tokiomis kaip animacija, fono paveikslėliai, hipersaitai ir pan., Ir ištirti jo galimybes, kaip matėme kai kuriuose savo pavyzdžiuose. Galiausiai, CSS yra vienas iš galingiausių būdų kurti ir transformuoti tinklalapius, todėl interneto kūrėjams neišvengiamai reikia įgyti šių įgūdžių norint sukurti dinamiškus tinklalapius.

Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su „back-end“ ir „front-end“ interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.

Turite mums klausimą? Prašau tai paminėti tinklaraščio „Užveskite CSS“ komentarų skyriuje ir mes su jumis susisieksime.