Ce este CSS Hover?

Selectorul :hover din CSS aplică stiluri unui element în timp ce cursorul trece peste el. Este folosit frecvent pentru a produce efecte interactive sau pentru a atrage atenția asupra elementelor atunci când interacționează cu acestea.

Puteți viza un element cu selectorul :hover folosind numele, clasa sau ID-ul etichetei sale.

10 din 50.00

De exemplu:

 .button:hover { background-color: #ff0000; color: #ffffff; } 

Culoarea de fundal din exemplul anterior va deveni roșie (#ff0000) atunci când un utilizator trece cu mouse-ul peste un element cu clasa „buton”, în timp ce culoarea textului va deveni albă (#ffffff).

Pot fi produse diferite efecte de trecere cu mouse-ul prin combinarea selectorului :hover cu alte elemente CSS, cum ar fi dimensiunea fontului, chenarul sau transformarea. Este un instrument puternic pentru a îmbunătăți feedbackul vizual și interactivitatea site-ului sau a aplicației.

Sintaxă:

 :hover { css declarations; } 

Să luăm câteva exemple pentru a înțelege hover folosind CSS:

Exemplul 1:

Cod HTML:

 Hover Me 

Cod CSS:

palindrom în java

 .hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 

Explicaţie:

În exemplul de mai sus, avem un buton cu un buton hover de clasă. Combinațiile inițiale de culori ale butonului sunt un fundal gri deschis (#eaeaea) și text gri închis (#333333). Când mouse-ul trece peste buton, culoarea de fundal se schimbă în roșu (#ff0000) și culoarea textului în alb (#ffffff).

Cu o durată de 0,3 secunde și o funcție de sincronizare ușoară, proprietatea de tranziție din clasa butonului hover asigură o tranziție fluidă pentru schimbarea culorii de fundal atunci când mouse-ul trece peste buton.

java main

Alte elemente, cum ar fi link-urile ( ), imagini ( ), divs ( ) sau orice alt element pe care doriți să îl faceți interactiv, pot folosi efecte similare de hover. Puteți crea diferite efecte de trecere cu mouse-ul, potrivite nevoilor dvs. de design, modificând proprietățile și valorile din selectorul :hover.

Exemplul 2: efect de zoom imagine

Cod HTML:

scan.nextstring java

Cod CSS:

 .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 

Exemplul 3: Efectul de subliniere a legăturii

Cod HTML:

 <a href="#">Hover Me</a> 

Cod CSS:

 .underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } 

Caracteristica Hover în CSS

Puteți îmbunătăți interactivitatea și efectele vizuale ale paginilor dvs. web folosind funcția CSS:hover, care oferă o varietate de avantaje și caracteristici. Următoarele sunt câteva caracteristici esențiale de trecere cu mouse-ul CSS:

Efect interactiv:Efectele interactive pot fi produse prin modificarea aspectului elementelor atunci când treceți cu mouse-ul peste folosind selectorul :hover. Pe măsură ce utilizatorii interacționează cu conținutul dvs., puteți modifica proprietăți precum culoarea de fundal, culoarea textului, opacitatea, umbra casetei, transformarea și multe altele pentru a le afișa feedback vizual.Direcționarea mai multor elemente:Puteți selecta mai multe elemente pe o pagină cu selectorul :hover. Acest lucru implică faptul că puteți proiecta efecte standardizate de hover pentru diferite elemente, inclusiv butoane, linkuri, imagini, meniuri de navigare și orice alt element pe care doriți să îl faceți interactiv.Suport pentru tranziții și animații:Selectorul :hover poate fi folosit cu tranziții și animații CSS pentru a produce efecte elegante, plăcute din punct de vedere estetic. Prin definirea proprietăților de tranziție sau animație, puteți specifica durata, funcția de sincronizare și alte setări legate de animație pentru a regla modul în care stilurile se schimbă atunci când trece cu mouse-ul peste un element.Adăugarea selectoarelor suplimentare:Selectorul :hover poate fi folosit cu alți selectori CSS pentru a se concentra asupra anumitor elemente sau pentru a aplica stiluri conform criteriilor predefinite. De exemplu, puteți crea efecte de trecere cu mouse-ul unice și personalizate combinând selectorul :hover cu selectoare de clasă, selectoare de ID sau pseudo-elemente.Sprijinirea accesibilității:Accesibilitatea ar trebui să fie luată în considerare atunci când se dezvoltă efecte de hover. Este posibil ca utilizatorii tehnologiilor de asistență care utilizează un cursor, cum ar fi cititoarele de ecran, să nu aibă acces la efectul de trecere cu mouse-ul. Din acest motiv, se recomandă să verificați dacă funcționalitatea sau conținutul principal este încă lizibil și utilizabil fără efecte de hover.Asistență între browsere:Cele mai multe browsere web moderne acceptă funcția CSS: hover. Este o componentă de specificație CSS compatibilă cu cele mai utilizate browsere, inclusiv Chrome, Firefox, Safari, Edge și altele. Acest lucru asigură consistența în aspect și comportament pe diferite platforme.