En este artículo, veremos cómo cambiar el color de fondo de li (elemento de lista) al pasar el mouse usando CSS.
El efecto de desplazamiento se puede usar para indicar interactividad o simplemente puede estar ahí con fines estéticos, como resaltar diferentes elementos en el caso de una lista. El evento Hover se puede diseñar usando la pseudoclase :hover y generalmente se activa cuando el cursor del usuario está sobre el elemento.
Sintaxis: para aplicar estilo al elemento li al pasar el mouse:
li:hover{
property-name: value;
}
Enfoque: como queremos cambiar el color de fondo de los elementos li al pasar el mouse sobre ellos, agregaremos una propiedad de color de fondo con un color que queremos cambiar al pasar el mouse, en el selector li:hover . Esto se muestra en el siguiente ejemplo, donde el color de fondo cambiará a cian al pasar el mouse.
Ejemplo 1: en el siguiente código, hemos creado una lista desordenada con 2 elementos de lista. El color de los elementos de la lista cambia al pasar el cursor sobre ellos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hover styling on li</title>
<style>
li:hover{
background-color:cyan;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p>Let's see the hover effect on li element</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
Explicación: hemos utilizado el selector li: hover para aplicar estilo a los elementos de la lista al pasar el mouse . Debajo de este selector, hemos especificado la propiedad, es decir , color de fondo : cian al pasar el mouse sobre un elemento de la lista. Alternativamente, una clase se puede usar para diseñar elementos de lista específicos, con diferentes propiedades, al pasar el mouse (como se muestra en el segundo ejemplo de código).
Producción:
código 1 salida
Ejemplo 2: en este ejemplo, hemos creado una clase que contiene las diferentes propiedades CSS y la utilizamos para diseñar la lista con una opción personalizada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hover styling on li</title>
<style>
.special:hover{
cursor: pointer;
background-color: burlywood;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p>Let's see the hover effect on some li elements</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="special">Item Special</li>
<li>Item 3</li>
<li class="special">Item Special 2</li>
</ul>
</body>
</html>
Explicación: aquí, el color de los elementos de la lista con clase «especial» cambia al pasar el cursor sobre ellos, y el cursor cambia al puntero. Podemos cambiar el color de fondo de li al pasar el mouse. Del mismo modo, también se pueden especificar otras propiedades bajo el CSS :hover selector r, y se pueden usar para otras etiquetas, según los requisitos.
Producción:
código 2 de salida
Publicación traducida automáticamente
Artículo escrito por jagritvats y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA