Las hojas de estilo en cascada (CSS) se diseñan utilizando o formato XML (incluido XHTML, SVG). Es un lenguaje de hoja de estilo que se utiliza principalmente para describir elementos a través de una serie diversa de métodos de formato. Uno de los métodos está flotando y en este artículo, entenderemos Hover en CSS de la siguiente manera:

que es salesforce service cloud

• ¿Qué es Hover en CSS?
• ¿Dónde se usa Hover?
• ¿Qué hace Hover?
• Compatibilidad
• ¿Como funciona?
• Coloca el cursor sobre el cambio de color de fondo a 'Rojo'
• Creación de opacidad de desplazamiento en imágenes
• Creación de superposición de texto en imágenes

¿Qué es Hover en CSS?

CSS hover es un componente selector que se utiliza para diseñar diferentes elementos cuando el puntero del mouse pasa sobre ellos. Se pueden utilizar en casi todos los elementos HTML. La función de desplazamiento en CSS tiene una importancia sustancial en el diseño de páginas web.

El componente de desplazamiento puede resaltar, codificar y personalizar páginas web según las preferencias del usuario en un programa de diseño web compacto y eficaz.

¿Dónde se usa Hover?

Los ejemplos más comunes de la viabilidad de la función de desplazamiento se pueden destacar en los principales sitios web de compras como Flipkart y Amazon. Cuando los usuarios se desplazan sobre cualquier producto en estos sitios web de comercio electrónico, el producto está programado para realizar una función de desplazamiento de zoom automatizado para proporcionar al cliente una mejor vista de los productos seleccionados. Mediante esta programación, la página web está diseñada para mostrar una vista compacta de toda la gama de productos acompañada de una vista detallada del producto de interés en un único diseño de página web.

¿Qué hace Hover?

El hover es una herramienta de programación multifuncional a través de la cual el usuario puede personalizar el elemento de destino con un sinfín de criterios de formato. Algunas instancias del conocimiento operativo de la función de desplazamiento incluyen:

• Cambio de color de fondo / fuente
• Incrustar texto oculto que se muestra al pasar el mouse
• Crear efectos de rollover en imágenes
• Zoom automatizado en texto / imágenes
• Modificar la opacidad de la imagen
• Incrustación de texto
• Intercambio de imágenes
• Div. Flotar
• Varias otras operaciones de formato CSS Hover.

El efecto de desplazamiento básicamente modifica el valor de propiedad de un elemento para permitir cambios animados en un texto / imagen establecido o elementos respectivos. La incrustación de elementos de desplazamiento CSS en el diseño de una página web transforma una página web normal en una página web interactiva, robusta y altamente funcional. Estos diseños de páginas web son fáciles de usar y completos. Las páginas web diseñadas por Hover tienen un mayor atractivo para el consumidor y atraen la atención de los clientes potenciales.

Compatibilidad de Hover en CSS

La función de desplazamiento es compatible con todos los principales navegadores web. Sin embargo, la implementación de este elemento en dispositivos táctiles sigue siendo una tarea desafiante. El desplazamiento en CSS habilita la accesibilidad al contenido en dispositivos que no admiten funciones de desplazamiento. Se ha observado que una función de desplazamiento activada en el dispositivo no de apoyo puede atascarse en el dispositivo.

En consecuencia, la visualización vital de contenido crucial se bloquea debido al problema del formato. Por un lado, donde el elemento flotante en el programa CSS aporta un gran nivel de personalización eficiente a las páginas web, a la inversa, su operatividad en dispositivos móviles está muy inactiva. Al capitular ante las circunstancias en las que el mundo de la tecnología de la información se está volviendo sustancialmente móvil, la función de desplazamiento puede volverse obsoleta con los avances tecnológicos. Por lo tanto, la necesidad de fabricar una función integrada portátil que funcione con dispositivos táctiles y móviles es extremadamente crucial.

¿Cómo funciona Hover en CSS?

El estilo de pseudoclase activo es dominante en el formato de desplazamiento de CSS y anula todos los enlaces posteriores que siguen a esta pseudoclase. Por ejemplo, en la pseudo-clase “: enlace: visitado o: activo, la regla: hover debe colocarse después de: enlace y: visitado pero antes: activo para el estilo apropiado: hover. El orden LVHA:: enlace,: hover,: visitado y: activo se utiliza como referencia para el estilo de formato apropiado: hover.

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Prueba de desplazamiento!El código oculto se muestra al pasar el mouse

En el código anterior, el elemento span se modifica para fusionar el elemento hover y div utilizando el elemento span: hover + div. El elemento de extensión que se mostrará en la página web de destino principal mostrará el texto '¡Prueba de desplazamiento!' Al mantener el cursor sobre el elemento span, aparece el elemento div 'El código oculto se muestra al pasar el cursor'. Este formato de incrustación es operativo tanto en el texto como en las imágenes.

Coloca el cursor sobre el cambio de color de fondo a 'Rojo'

p: hover, h1: hover, a: hover {background-color: Red}
Hover rojo
 
Hover rojo
 
Enlaces:
 
Prueba de vuelo estacionario rojo:
  google.com  
  Nota: Hola
 

El código anterior personaliza el

,

y elemento y los integra en una función de desplazamiento común. Este código está diseñado para cambiar el color del texto a rojo cuando el puntero del mouse pasa sobre ellos. El componente h1 y h2 muestra 'CSS: Hover Test Code' y 'Hover Red' respectivamente. El elemento de párrafo: Hover Test Red y la etiqueta de anclaje: google.com se resaltan en rojo cuando el puntero del mouse pasa sobre ellos.

Creación de opacidad de desplazamiento en imágenes

.pic {ancho: 1900px alto: 1900px opacidad: 1 filtro: alfa (opacidad = 100) fondo: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) sin repetición} .pic: hover {opacidad: 0.2 filtro: alfa (opacidad = 30)}

El programa CSS anterior muestra la modificación de la opacidad de una imagen al pasar el mouse. La opacidad original de la imagen es 1 sin embargo, utilizando el filtro de desplazamiento de opacidad, el mismo se ha modificado a 0,2. Este código muestra que al utilizar el elemento de desplazamiento se puede modificar la opacidad de una imagen y / o texto.

Creación de superposición de texto en imágenes

.pic {ancho: 4000px alto: 2170px fondo: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {ancho: 3400px alto: 2170px fondo: #FFF opacidad: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, relleno serif: 30px} El naranja es una fibra fruta rica. Los antioxidantes presentes en una naranja pueden ayudar en la digestión, hacer que la piel brille y actuar como un elemento anti-envejecimiento.

Text Layering en CSS hover es una herramienta eficiente para incrustar el texto descriptivo de la imagen dentro de la propia imagen. Esta herramienta ayuda a proporcionar una descripción general compacta de la imagen sin ocupar espacio inactivo en el espacio limitado de diseño web. En este código, la imagen de fondo está incrustada con un texto descriptivo que se muestra cuando el puntero del mouse se desplaza sobre el texto.

Esto concluye todos los aspectos importantes de hover en CSS y destaca su usabilidad en el desarrollo web. Hay muchos efectos especiales que puede traer a nuestras páginas web. Siempre podemos probar diferentes combinaciones del selector de desplazamiento con otras propiedades CSS como animación, imágenes de fondo, hipervínculos, etc. y explorar su potencial como vimos en algunos de nuestros ejemplos. Finalmente, CSS es una de las formas más poderosas de diseñar y transformar páginas web y, por lo tanto, es inminente que los desarrolladores web adquieran esta habilidad para construir páginas web dinámicas.

Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo capacita en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.

Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios del blog 'Hover in CSS' y nos comunicaremos con usted.