Els fulls d'estil en cascada (CSS) es dissenyen mitjançant el fitxer o format XML (incloent XHTML, SVG). És un llenguatge de fulls d'estil utilitzat principalment per descriure elements mitjançant una sèrie diversa de mètodes de format. Un dels mètodes és el de volar i, en aquest article, entendrem el cursor de ratolí a CSS de la manera següent:
- Què és Hover a CSS?
- On s'utilitza Hover?
- Què fa Hover?
- Compatibilitat
- Com funciona?
- Passeu el cursor per canviar el color de fons a 'Vermell'
- Creació de l’opacitat del cursor per sobre de les imatges
- Creació de superposició de text a les imatges
Què és Hover a CSS?
CSS hover és un component selector que s’utilitza per donar estil a diferents elements quan el punter del ratolí passa per sobre d’ells. Es poden utilitzar en gairebé tots els elements HTML. La característica del cursor a CSS té una importància substancial en el disseny de pàgines web.
c ++ què és l'espai de noms
El component del cursor pot ressaltar, codificar i personalitzar les pàgines web segons les preferències de l'usuari en un programa de disseny web compacte i eficaç.
On s'utilitza Hover?
Els exemples més habituals de viabilitat de la funció de vol es poden ressaltar als principals llocs web de compres com Flipkart i Amazon. Quan els usuaris passen el cursor per sobre de qualsevol producte d’aquests llocs web de comerç electrònic, el producte està programat per dur a terme una funció de desplaçament automàtic del zoom per proporcionar al client una millor visió dels seus productes seleccionats. Mitjançant aquesta programació, la pàgina web està dissenyada per mostrar una vista compacta de tota la gamma de productes acompanyada d’una visió detallada del producte d’interès en un disseny de pàgina web única.
Què fa Hover?
El cursor per sobre és una eina de programació multifuncional mitjançant la qual l'usuari pot personalitzar l'element objectiu amb un nombre infinit de criteris de format. Alguns exemples del coneixement operatiu de la funció de sobrevolació inclouen:
- Canvi de color de fons / tipus de lletra
- Inserir text ocult que es mostra al cursor
- Creeu efectes de bolcada a les imatges
- Zoom automàtic de text / imatges
- Modifiqueu l’opacitat de la imatge
- Inserció de text
- Intercanvi d'imatges
- Div. Passeu el cursor
- Diverses altres operacions de format de cursor per CSS.
L'efecte de desplaçament bàsic modifica el valor de la propietat d'un element per activar els canvis en un text / imatge indicat o en els elements respectius. La inserció d’elements CSS en un disseny de pàgina web transforma una pàgina web normal en una pàgina web interactiva, robusta i altament funcional. Aquests dissenys de pàgines web són fàcils d’utilitzar i complets. Les pàgines web dissenyades per sobre tenen un atractiu més gran per al consumidor i atreuen l’avís de clients potencials.
Compatibilitat de Hover en CSS
La funció de cursor és compatible amb tots els principals navegadors web. Tot i això, la implementació d’aquest element en dispositius tàctils continua sent una tasca difícil. El passatge del cursor a CSS permet l'accessibilitat al contingut en dispositius que no admeten funcions de desplaçament. S'ha observat que una funció de desplaçament activat al dispositiu no compatible pot quedar-se atrapada al dispositiu.
En conseqüència, la visualització vital de contingut crucial es bloqueja a través del problema de format. D’una banda, quan l’element del cursor del programa CSS aporta un gran nivell de personalització eficient a les pàgines web, la seva operativitat en dispositius mòbils està molt inactiva. Capítol a les circumstàncies en què el món de les tecnologies de la informació creix de manera substancialment mòbil, la funció de rastreig corre el risc de quedar obsoleta amb els avenços tecnològics. Per tant, la necessitat de fabricar una funció incrustada portàtil que funcioni amb dispositius tàctils i mòbils és extremadament crucial.
Com funciona Hover a CSS?
L’estil actiu de pseudoclases és dominant en el format del cursor per sobre de CSS i substitueix qualsevol enllaç / seguiment posterior que segueix aquesta pseudoclasse. Per exemple, a la pseudo-classe “: enllaç: visitat, o: actiu, la regla: hover s’ha de col·locar després de: enllaç i: visitat, però abans: activa per a l’estil adequat: hover. L'ordre LVHA:: link,: hover,: Visit i: active s'utilitza com a referència per a l'estil de format adequat: hover.
div {background-color: green padding: 18px display: none} span: hover + div {display: block}Prova el cursor per sobreEl codi amagat es mostra a sobre
Al codi anterior, l’element span es modifica per combinar l’element hover i div mitjançant l’element span: hover + div. L'element de span que es mostrarà a la pàgina web de destinació principal mostrarà el text 'Prova de cursor'. Si passeu el cursor per sobre de l’element span es mostra l’element div 'El codi ocult es mostra al volant'. Aquest format d’incorporació és operatiu al text i a les imatges.
Passeu el cursor per canviar el color de fons a 'Vermell'
p: hover, h1: hover, a: hover {background-color: Red}Passeu per vermell
Passeu per vermell
Enllaços:
Passa el cursor per vermell:
google.comNota: Hola
El codi anterior personalitza el fitxer
,