Què és CSS Hover?

El selector :hover en CSS aplica estils a un element mentre el cursor passa per sobre. S'utilitza amb freqüència per produir efectes interactius o per cridar l'atenció sobre elements quan s'interacciona amb ells.

Podeu orientar un element amb el selector :hover utilitzant el seu nom d'etiqueta, classe o identificador.

Per exemple:

np zeros

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

El color de fons de l'exemple anterior es tornarà vermell (#ff0000) quan un usuari passa el cursor per sobre d'un element amb la classe 'botó', mentre que el color del text es tornarà blanc (#ffffff).

Es poden produir diversos efectes de desplaçament del cursor combinant el selector :hover amb altres elements CSS com la mida de la lletra, la vora o la transformació. És una eina potent per augmentar el feedback visual i la interactivitat del vostre lloc web o aplicació.

Sintaxi:

 :hover { css declarations; } 

Agafem alguns exemples per entendre el cursor mitjançant CSS:

Exemple 1:

Codi HTML:

 Hover Me 

Codi CSS:

convertir la matriu de bytes en cadena

 .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; } 

Explicació:

A l'exemple anterior, tenim un botó amb un botó de cursor de classe. Les combinacions de colors inicials del botó són un fons gris clar (#eaeaea) i un text gris fosc (#333333). Quan el ratolí passa per sobre del botó, el color de fons canvia a vermell (#ff0000) i el color del text a blanc (#ffffff).

Amb una durada de 0,3 segons i una funció de sincronització senzilla, la propietat de transició de la classe de botons hover garanteix una transició fluida per al canvi de color de fons quan el ratolí passa per sobre del botó.

Altres elements, com ara enllaços ( ), imatges ( ), divs ( ) o qualsevol altre element que vulgueu fer interactiu, poden utilitzar efectes de flotació similars. Podeu crear diversos efectes de desplaçament del cursor adequats a les vostres necessitats de disseny canviant les propietats i els valors dins del selector :hover.

Exemple 2: efecte de zoom de la imatge

Codi HTML:

Codi CSS:

trencar java

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

Exemple 3: efecte subratllat d'enllaç

Codi HTML:

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

Codi CSS:

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

Característica de Hover en CSS

Podeu millorar la interactivitat i els efectes visuals de les vostres pàgines web mitjançant la funció CSS:hover, que ofereix una varietat d'avantatges i funcions. Les següents són algunes de les funcions essencials de CSS per passar el cursor:

Efecte interactiu:Es poden produir efectes interactius alterant l'aparença dels elements quan es passa el cursor per sobre amb el selector :hover. A mesura que els usuaris interactuen amb el vostre contingut, podeu canviar propietats com el color de fons, el color del text, l'opacitat, l'ombra del quadre, la transformació i més per mostrar-los comentaris visuals.Orientació a diversos elements:Podeu seleccionar diversos elements en una pàgina amb el selector :hover. Això implica que podeu dissenyar efectes de flotació estandarditzats per a diversos elements, inclosos botons, enllaços, imatges, menús de navegació i qualsevol altre element que vulgueu fer interactiu.Suport per a transicions i animacions:El selector :hover es pot utilitzar amb transicions i animacions CSS per produir efectes estèticament agradables. En definir les propietats de transició o d'animació, podeu especificar la durada, la funció de cronometratge i altres paràmetres relacionats amb l'animació per regular com canvien els estils quan es passa el cursor sobre un element.Afegeix selectors addicionals:El selector :hover es pot utilitzar amb altres selectors CSS per centrar-se en elements concrets o aplicar estils sota criteris predefinits. Per exemple, podeu crear efectes únics i personalitzats combinant el selector :hover amb selectors de classe, selectors d'ID o pseudoelements.Suport a l'accessibilitat:S'ha de tenir en compte l'accessibilitat quan es desenvolupen efectes de flotació. És possible que els usuaris de tecnologies d'assistència que utilitzen un cursor, com ara lectors de pantalla, no tinguin accés a l'efecte de passar el cursor. Per això, s'aconsella comprovar que la funcionalitat o el contingut principal encara sigui llegible i utilitzable sense efectes de flotació.Suport entre navegadors:La majoria dels navegadors web moderns admeten la funció CSS: hover. És un component d'especificació CSS ​​compatible amb els navegadors més utilitzats, inclosos Chrome, Firefox, Safari, Edge i altres. Això garanteix la coherència en l'aparença i el comportament a les diferents plataformes.