Las hojas de estilo en cascada (CSS) son la herramienta principal para dise ar p ginas web. Le permiten cambiar la apariencia de los elementos en funci n de diferentes eventos, como pasar el mouse sobre un elemento. En este art culo, veremos c mo se pueden cambiar los estilos de un elemento al pasar el mouse sobre otro elemento usando CSS.
Para cambiar los estilos de un elemento al pasar sobre otro elemento, puede usar las pseudoclases: hover y: not. La pseudoclase: hover se aplica a un elemento cuando se coloca el mouse sobre l. Con esta pseudo clase, puede definir nuevos estilos para un elemento al pasar el cursor sobre l. Pseudoclase: not le permite excluir un elemento espec fico de la selecci n.
:not(.element) {
- /* Estilos */
- }
- En el ejemplo anterior, usamos la pseudoclase: hover para cambiar los estilos de un elemento con la clase "element" al pasar el cursor sobre l. Para excluir un elemento espec fico de la muestra, usamos una pseudoclase :not que especifica la clase del elemento que queremos excluir.
- C mo cambiar los estilos de un elemento al pasar sobre otro elemento
Cambiar estilos con CSS
Al pasar sobre un elemento
Pregunta-respuesta
C mo cambio el color del texto al pasar el mouse sobre el bot n?
C mo cambio el color de fondo del bloque al pasar el mouse sobre un enlace?
C mo cambiar el Tama o de los iconos al pasar sobre la imagen?
C mo puedo cambiar el estilo de un p rrafo al pasar el mouse sobre el encabezado?
C mo cambiar los estilos de un elemento al pasar sobre otro elemento
En CSS, existe la posibilidad de cambiar los estilos de un elemento al pasar el mouse sobre otro elemento. Para ello, se puede utilizar la pseudoclase: hover.
Aqu hay un c digo de ejemplo que cambia el color del texto al pasar el mouse sobre un enlace:
a:hover {
color: red;
}
En este ejemplo, al pasar sobre un enlace, el color del texto cambiar a rojo.
Tambi n puede cambiar otras propiedades de un elemento al pasar el mouse sobre otro elemento. Aqu hay un c digo de ejemplo que cambia el color de fondo de la tabla cuando se pasa sobre una celda:
td:hover {
background-color: lightblue;
}
En este ejemplo, al pasar sobre una celda de la tabla, el color de fondo de toda la tabla cambiar a azul claro.
Con la pseudoclase: hover, puede crear una variedad de efectos y animaciones al pasar sobre elementos de una p gina web. Es una propiedad muy til que permite que la interfaz sea m s interactiva y atractiva para los usuarios.
Cambiar estilos con CSS
Puede cambiar los estilos de elementos de una p gina web utilizando CSS (Cascading Style Sheets). CSS le permite definir el aspecto y la ubicaci n de los elementos en una p gina, as como agregar varios efectos, como cambiar el estilo al pasar o hacer clic en un elemento.
Una forma com n de cambiar los estilos de un elemento al pasar sobre otro elemento es usar una pseudoclase :hover. Pseudoclase :hover le permite aplicar estilos a un elemento cuando pasa el cursor sobre l.
Para cambiar el estilo de un elemento al pasar sobre otro elemento, es suficiente escribir el c digo CSS correspondiente. Por ejemplo, si desea cambiar el color del texto de un enlace al pasar el mouse sobre l, puede usar el siguiente c digo:
a:hover {
color: red;
}
Por lo tanto, al pasar el mouse sobre el enlace rojo, cambiar su color a rojo.
- Tambi n puede cambiar otros estilos de elemento, como el color de fondo, la fuente, las dimensiones y m s. Al hacerlo, es importante elegir el elemento adecuado al que se aplicar la pseudoclase :hover.
- Dependiendo de la tarea, puede usar diferentes selectores para definir los elementos a los que se aplicar n los estilos al pasar el rat n. Por ejemplo, puede aplicar estilos a un elemento al pasar el mouse sobre su padre o sobre el siguiente vecino.
- Como resultado del uso de pseudo-clase CSS :hover puede crear efectos interactivos en las p ginas web, haci ndolos m s atractivos y f ciles de usar.
- Al pasar sobre un elemento
CSS tiene una propiedad especial: hover, que le permite especificar los estilos de un elemento cuando pasa el cursor sobre l. Esto permite cambiar visualmente el elemento, hacerlo m s expresivo o atractivo para el usuario.
Puede utilizar los selectores de anidamiento para aplicar estilos a un elemento al pasar el rat n sobre otro elemento.
Por ejemplo, tenemos una lista de varios elementos y necesitamos agregar un estilo al elemento de la lista al pasar el mouse sobre la lista en s :
Elemento 1
Elemento 2
Elemento 3
| Elemento 4 | Para ello podemos utilizar el siguiente c digo CSS: | ul:hover li { |
| background-color: yellow; | } | Por lo tanto, al pasar sobre una lista, todos sus elementos cambiar n el color de fondo a amarillo. |
| Tambi n puede aplicar estilos a un elemento principal al pasar el mouse sobre su elemento secundario. Por ejemplo, tenemos una tabla y queremos cambiar el color de fondo de una fila al pasar sobre cualquier celda de esa fila: | Celda 1 | Celda 2 |
Celda 3
Celda 4
Celda 5
Celda 6
Celda 7
Celda 8
Celda 9
Para ello podemos utilizar el siguiente c digo CSS:
tr:hover {
background-color: yellow;
}
Ahora, al pasar sobre cualquier celda de la tabla, toda la fila cambiar el color de fondo a amarillo.
El uso de la propiedad CSS: hover al pasar sobre un elemento le permite crear efectos interactivos y mejorar la experiencia Visual de los usuarios.
Pregunta-respuesta
C mo cambio el color del texto al pasar el mouse sobre el bot n?