Com implementar el cursor a CSS amb exemples



Aquest article us proporcionarà un coneixement detallat i complet de com implementar Hover a CSS amb exemples.

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?

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

Passeu el cursor per sobre de CSS

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.com

Nota: Hola

El codi anterior personalitza el fitxer

,

i element i els integra en una funció comuna de vol. Aquest codi està dissenyat per canviar el color del text a vermell quan el punter del ratolí passa per sobre. Els components h1 i h2 mostren respectivament 'CSS: Codi de prova del cursor' i 'Vermell del cursor'. L'element del paràgraf: Passa per la prova de color vermell i etiqueta d'ancoratge: google.com es ressalta en vermell quan el punter del ratolí passa per sobre d'ells.

com compilar a Java

Creació de l’opacitat del cursor per sobre de les imatges

.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) no es repeteix} .pic: passa el ratolí {opacitat: 0,2 filtre: alfa (opacitat = 30)}

El programa CSS anterior mostra la modificació de l’opacitat d’una imatge en passar el cursor. L’opacitat original de la imatge és 1 tanmateix, mitjançant el filtre per sobre de l'opacitat, el mateix s'ha modificat a 0,2. Aquest codi mostra que mitjançant l’element del cursor es pot modificar l’opacitat d’una imatge i / o text.

Creació de superposició de text a les imatges

.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 {opacitat: 0,6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} El taronja és una fibra fruita rica. Els antioxidants presents en una taronja poden ajudar a la digestió, fer que la pell brilli i actuï com un element anti-envelliment.

La visualització de capes de text a CSS és una eina eficient per incrustar el text descriptiu de la imatge dins de la mateixa imatge. Aquesta eina permet proporcionar una visió general compacta de la imatge sense ocupar espai latent en un espai de disseny web limitat. En aquest codi, la imatge de fons està incrustada amb un text descriptiu que es mostra quan el punter del ratolí passa per sobre del text.



D’aquesta manera es conclouen tots els aspectes importants de passar el cursor a CSS i es ressalta la seva usabilitat en el desenvolupament web. Hi ha molts efectes especials que pot aportar a les nostres pàgines web. Sempre podem provar diferents combinacions del selector del cursor amb altres propietats CSS com animació, imatges de fons, hiperenllaços, etc. i explorar el seu potencial tal com hem vist en alguns dels nostres exemples. Finalment, CSS és una de les maneres més potents de dissenyar i transformar pàgines web i, per tant, és imminent que els desenvolupadors web adquireixin aquesta habilitat per crear pàgines web dinàmiques.

Consulteu el nostre que inclou formació en directe dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web d’interfície i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.

Tens alguna pregunta? Esmenteu-lo a la secció de comentaris del bloc 'Passa el cursor per sobre de CSS' i us respondrem.