Foi de stil în cascadă (CSS) sunt proiectate folosind sau format XML (inclusiv XHTML, SVG). Este un limbaj de foaie de stil utilizat în principal pentru a descrie elemente printr-o serie diversă de metode de formatare. Una dintre metode se deplasează și, în acest articol, vom înțelege Hover în CSS în modul următor:

• Ce este Hover în CSS?
• Unde se folosește Hover?
• Ce face Hover?
• Compatibilitate
• Cum functioneazã?
• Plasați cursorul la schimbarea culorii de fundal la „Roșu”
• Crearea opacității cursorului pe imagini
• Crearea suprapunerii de text pe imagini

Ce este Hover în CSS?

CSS hover este o componentă de selecție care este utilizată pentru a stiliza diferite elemente atunci când indicatorul mouse-ului se deplasează deasupra lor. Ele pot fi utilizate pe aproape fiecare element HTML. Funcția de deplasare în CSS are o importanță substanțială în proiectarea paginilor web.

ce este un browser sqlite

Componenta hover poate evidenția, codifica și personaliza paginile web conform preferințelor utilizatorului într-un program compact și eficient de proiectare web.

Unde se folosește Hover?

Cele mai frecvente exemple de viabilitate a funcției hover pot fi evidențiate pe site-urile de cumpărături importante, cum ar fi Flipkart și Amazon. Atunci când utilizatorii trec pe orice produs de pe aceste site-uri web de comerț electronic, produsul este programat să efectueze o funcție automată de zoom pentru a oferi clientului o vizualizare mai bună a produselor selectate. Prin această programare, pagina web este concepută pentru a afișa o vizualizare compactă a întregii game de produse însoțită de o vizualizare detaliată a produsului de interes într-un singur design de pagină web.

Ce face Hover?

Hover este un instrument de programare multifuncțional prin care utilizatorul poate personaliza elementul țintă cu un număr nesfârșit de criterii de formatare. Unele instanțe ale know-how-ului operațional al caracteristicii hover includ:

• Schimbarea culorii de fundal / font
• Incorporarea textului ascuns care se afișează pe Hover
• Creați efecte de răsturnare pe imagini
• Zoom automat pe text / imagini
• Modificați opacitatea imaginii
• Încorporarea textului
• Schimb de imagini
• Div. Planare
• Mai multe alte operațiuni de formatare CSS Hover.

Efectul hover modifică practic valoarea proprietății unui element pentru a activa modificările unui text / imagine declarat sau a elementelor respective. Incorporarea elementelor CSS hover într-un design de pagină web transformă o pagină web obișnuită într-o pagină web interactivă, robustă și extrem de funcțională. Aceste modele de pagini web sunt ușor de utilizat și complete. Paginile web proiectate Hover conțin un apel mai mare pentru consumatori și atrag atenția clienților potențiali.

Compatibilitatea Hover în CSS

Funcția hover este compatibilă cu toate browserele web importante. Cu toate acestea, implementarea acestui element pe dispozitivele tactile este încă o sarcină dificilă. Plasarea în CSS permite accesibilitatea conținutului pe dispozitive care nu acceptă funcții de plecare. S-a observat că o funcție de comutare activată pe dispozitivul care nu suportă se poate bloca pe dispozitiv.

În consecință, afișarea vitală a conținutului crucial este blocată prin problema formatării. Pe de o parte, în cazul în care elementul hover din programul CSS contribuie la un nivel ridicat de personalizare eficientă a paginilor web invers, operabilitatea acestuia pe dispozitive mobile este foarte latentă. Capitulând circumstanțele în care lumea tehnologiei informației crește în mod substanțial mobilă, caracteristica de hover riscă să rămână învechită cu progresele tehnologice. Prin urmare, necesitatea de a fabrica o funcție încorporată portabilă care funcționează cu dispozitive tactile și mobile este extrem de crucială.

Cum funcționează Hover în CSS?

Stilul activ de pseudo-clasă este dominant în formatarea CSS hover și suprascrie orice / toate legăturile ulterioare care sunt urmate de această pseudo-clasă. De exemplu, în pseudo-clasa „: link: vizitat, sau: activ, regula: hover trebuie plasată după: link și: vizitat, dar înainte: activ pentru stilul adecvat: hover. Ordinea LVHA:: link,: hover,: vizitat și: active este utilizată ca referință pentru stilul de formatare adecvat: hover.

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Hover Test!Codul ascuns se afișează pe hover

În codul de mai sus, elementul span este modificat pentru a îmbina elementul hover și div utilizând elementul span: hover + div. Elementul span care se va afișa pe pagina web principală de destinație va afișa textul „Treceți cu mouse-ul!” Plasarea în continuare pe elementul span afișează elementul div „Cod ascuns se afișează pe hover”. Acest format de încorporare este operațional atât pentru text, cât și pentru imagini.

Plasați cursorul la schimbarea culorii de fundal la „Roșu”

p: hover, h1: hover, a: hover {background-color: Red}
Plasați cursorul pe roșu
 
Plasați cursorul pe roșu
 
Link-uri:
 
Hover Test Red:
  Google com  
  Notă: Buna ziua
 

Codul de mai sus personalizează fișierul

,

și element și le integrează într-o funcție de hover comună. Acest cod este conceput pentru a schimba culoarea textului în roșu atunci când indicatorul mouse-ului trece deasupra lor. Componentele h1 și h2 afișează „CSS: Hover Test Code” și respectiv „Hover Red”. Elementul de paragraf: Hover Test Red și eticheta de ancorare: google.com se evidențiază cu roșu atunci când indicatorul mouse-ului se deplasează deasupra lor.

python __init__ self

Crearea opacității cursorului pe imagini

.pic {width: 1900px height: 1900px opacity: 1 filter: alpha (opacity = 100) background: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) fără repetare} .pic: hover {opacitate: 0.2 filtru: alfa (opacitate = 30)}

Programul CSS de mai sus afișează modificarea opacității unei imagini în cursă. Opacitatea originală a imaginii este unu totuși, utilizând filtrul de opacitate, acesta a fost modificat la 0,2. Acest cod afișează că prin utilizarea elementului hover se poate modifica opacitatea unei imagini și / sau a unui text.

Crearea suprapunerii de text pe imagini

.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 {opacitate: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Orange este o fibră fruct bogat. Antioxidanții prezenți într-o portocală pot ajuta la digestie, pot face pielea să strălucească și să acționeze ca un element anti-îmbătrânire.

Text Layering în CSS hover este un instrument eficient pentru a încorpora textul descriptiv al imaginii în imaginea însăși. Acest instrument vă ajută să oferiți o imagine de ansamblu compactă a imaginii fără a ocupa spațiu latent într-un spațiu limitat de proiectare web. În acest cod, imaginea de fundal este încorporată cu un text descriptiv care se afișează atunci când indicatorul mouse-ului se deplasează deasupra textului.

Aceasta concluzionează toate aspectele importante ale planării în CSS și evidențiază utilizarea sa în dezvoltarea web. Există multe efecte speciale pe care le poate aduce pe paginile noastre web. Putem oricând să încercăm diferite combinații ale selectorului cu hover-ul cu alte proprietăți CSS, cum ar fi animația, imaginile de fundal, hyperlink-urile etc. și să-i explorăm potențialul așa cum am văzut în unele exemple. În cele din urmă, CSS este unul dintre cele mai puternice moduri de a proiecta și transforma pagini web și, prin urmare, este iminent ca dezvoltatorii web să dobândească această abilitate pentru a construi pagini web dinamice.

Verificați-ne care vine cu instruire live condusă de instructor și experiență în viața reală a proiectului. Această instruire vă face să aveți abilități de a lucra cu tehnologii web back-end și front-end. Include cursuri de dezvoltare web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a blogului „Plasați cursorul în CSS” și vă vom răspunde.