En estradas anteriores vimos como crear Listas en HTML y posteriormente vimos los estilos de viñetas que podemos aplicar a estas, hasta aprendimos que podemos colocar una imagen como viñeta en las Listas HTML. En esta entrada usaremos el efecto Hover para hacer que el estilo de nuestras viñetas cambie al pasar el mouse.
Cambiar el Tipo de Viñeta en las Listas al pasar el Mouse:
Pasa el mouse sobre cualquier elemento de la lista:
- Primer Elemento
- Segundo Elemento
- Tercer Elemento
- Cuarto Elemento
Para lograr este efecto de cambio de Viñetas en nuestras Listas HTML solo tenemos que aplicar la propiedad Hover en nuestros estilos CSS, veremos el código a aplicar para que tengamos Nuestras Listas con un efecto de Cambio de Viñetas:
En el código CSS podemos apreciar la clase .listahover la cual hace referencia a la etiqueta <li> que contiene la propiedad hover, el cual solo funciona cuando el mouse pase sobre los elementos de la lista como vimos en el ejemplo.
Podemos aplicar mas estilos a nuestras viñetas, incluso podemos poner una imagen, si quieres mas estilos de viñetas en nuestras listas vean la entrada de Tipos de viñetas en Listas con CSS, y si desean agregar imágenes en ves de viñetas tenemos un ejemplo de como hacerlo en Imágenes en nuestras Viñetas, para entender mas sobre el uso de Viñetas en las Listas a continuación veremos como aplicar una imagen en estas.
Imágenes de Viñetas en las Listas con efecto Hover:
Aplicando un poco de creatividad hasta podemos tener divertidas y atractivas viñetas en nuestras Listas, aplicando imágenes y dándole un efecto Hover para mayor atractivo, como por ejemplo la siguiente lista, en la cual ponemos imágenes en ves de los tipos de viñetas comunes que podemos añadir:
Pasa el mouse sobre cualquier elemento de la lista:
- Primer Elemento
- Segundo Elemento
- Tercer Elemento
- Cuarto Elemento
Así como vemos en el ejemplo de arriba también podemos añadir el mismo efecto Hover pero esta ves usando imágenes para nuestras viñetas:
Para añadir una imagen en nuestras Viñetas lo hacemos con list-style-image, como vemos en el código CSS, ademas aplicamos la propiedad Hover especificando la etiqueta <li>, para que al seleccionar un elemento de la lista se note el cambio al pasar el mouse.
Espero que sea de mucha ayuda este Tutorial, Cualquier duda o aporte hacerlo por comentario.
Gracias por su Tiempo!
0 comentarios: