CSS Not Hover - Cómo cambiar estilos cuando no se está pasando el cursor
El pseudo-selector "not:hover" es una de las características más útiles de CSS porque te permite cambiar el estilo de un elemento en el momento en que no se está pasando el cursor por encima. Esto significa que puedes usarlo para construir páginas web más interactivas e intuitivas. En este artículo exploraremos cómo utilizar el pseudo-selector "not:hover", desde su sintaxis hasta ejemplos prácticos de su implementación en la programación web.
📋 Aquí podrás encontrar✍
Sintaxis
La sintaxis del pseudo-selector "not:hover" se basa en dos partes: el selector que deseas aplicar y los estilos que deseas aplicar a ese selector. El siguiente es un ejemplo de esta sintaxis:
selector:not(:hover) {
/*estilos que deseas aplicar cuando no hay hover*/
}
En este ejemplo, "selector" hace referencia al elemento o grupo de elementos que deseas aplicar el pseudo-selector, "not" indica que no deseas que el pseudo-selector "hover" esté presente y "estilos que deseas aplicar cuando no hay hover" son los estilos que el elemento tendrá cuando el cursor no esté pasando sobre él.
Ejemplos de uso
A continuación, se presentan algunos ejemplos prácticos de cómo puedes utilizar el pseudo-selector "not:hover" en la programación web.
Ejemplo 1: Cambiar el color de un botón
Supongamos que tienes un botón en tu página que tienes un fondo de color verde y que quieres cambiar el color de fuente cuando no se está haciendo hover sobre él. Para hacer esto, utilizarías la siguiente sintaxis:
button:not(:hover) {
color: blanco;
}
Este código actualizará el botón para que tenga texto blanco cuando no se esté haciendo hover sobre él.
Ejemplo 2: Evitar cambios de estilo en elementos anidados
En algunas ocasiones, es posible que no desees aplicar un estilo en elementos anidados dentro de otros elementos. El selector "not:hover" te permite evitar este problema. Supongamos que tienes el siguiente código HTML:
Este es un texto de ejemplo.
Para evitar que el texto dentro del elemento "contenedor" tenga un borde negro cuando el cursor pase sobre él, puedes utilizar la siguiente sintaxis:
.contenedor:not(:hover) {
border: 1px solid negro;
}
.contenedor p {
border: none;
}
De esta manera, el borde negro sólo se aplicaría al elemento "contenedor" y no a su contenido.
Ejemplo 3: Cambiar el tamaño de un elemento
Otro ejemplo de uso del pseudo-selector "not:hover" es cambiar el tamaño de un elemento en el momento en que no se está haciendo hover sobre él. Supongamos que tienes una imagen en tu página y deseas que sea más pequeña cuando el cursor no esté encima de ella. El siguiente código lograría ese objetivo:
img:not(:hover) {
width: 300px;
height: 300px;
}
Este código haría que la imagen tuviera un tamaño de 300 píxeles de ancho y 300 píxeles de altura cuando no se esté haciendo hover sobre ella.
Conclusión
El pseudo-selector "not:hover" es una herramienta poderosa que puede hacer que tus diseños web sean más interactivos e intuitivos. Si bien puede tomar algo de tiempo acostumbrarse a utilizarlo correctamente, una vez que te acostumbras, su uso se convertirá en algo muy natural. Si buscas mejorar tu conocimiento en términos de programación web, CSS y HTML, este pseudo-selector debe ser una parte clave de tu arsenal.
Preguntas frecuentes
¿Puedo utilizar "not:hover" en otros pseudo-selectores?
Sí, puedes utilizar "not:hover" en otros pseudo-selectores como :active, :visited, o :focus, para añadir estilos a elementos que no estén siendo activados, visitados u obteniendo el foco.
Sí, "not:hover" es compatible con la mayoría de los navegadores modernos, así como con versiones antiguas como Internet Explorer 8 y más allá.
¿Puedo anidar "not:hover"?
Sí, puedes anidar "not:hover" en elementos de CSS para construir estilos más complejos y específicos.
Para garantizar la compatibilidad con navegadores antiguos, asegúrate de utilizar un programa que te permita eliminar prefijos de CSS redundantes, y comprueba que tus scripts estén escritos de manera que sean compatibles con versiones antiguas de los navegadores.
Ejemplos de códigos o comandos
-
Ejemplo 1: Cambiar el color de texto de un botón cuando no se hace hover:
button:not(:hover) {
color: blanco;
}
-
Ejemplo 2: Evitar cambios de estilo en elementos anidados:
.contenedor:not(:hover) {
border: 1px solid negro;
}
.contenedor p {
border: none;
}
-
Ejemplo 3: Cambiar el tamaño de un elemento:
img:not(:hover) {
width: 300px;
height: 300px;
}
¡Gracias por leer este artículo! Si tienes alguna pregunta o comentario, déjalos en la sección de comentarios a continuación. Recuerda que la práctica hace al maestro, así que asegúrate de seguir experimentando con el pseudo-selector "not:hover" en tus propios proyectos.
Subir
Deja una respuesta