Cómo cambiar el estilo de Hover en React

En este tutorial, aprenda cómo diseñar un evento de desplazamiento en JavaScript y React, usando estilos internos y externos, con CSS.

Introducción

Trabajar con elementos visuales es una excelente manera de mantener nuestra interfaz interactiva y captar la atención del usuario. Tener objetos animados en nuestra pantalla crea una experiencia única y aumenta la interactividad.

En este artículo, aprenderemos cómo aplicar estilo al pasar el mouse por encima en React usando CSS, así como también cómo aplicar estilos al pasar el mouse en línea.

Hover es una pseudoclase que simplemente nos permite agregar estilos específicos para que un usuario sepa cuándo su mouse está encendido y apagado en un elemento específico. Para este artículo, usaremos un cuadro:

1
2
3
4
5
6
7
8
9
const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

que tiene este estilo básico:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

Esencialmente, cambiaremos el color de fondo a “azul claro” cuando el mouse esté sobre el cuadro y luego lo devolveremos a su estilo predeterminado cuando se quite el mouse.

Cómo cambiar el estilo de Hover en React

Hay dos enfoques para esto: externo e integrado. Externo implica tener un archivo CSS separado que facilita el estilo al pasar el mouse, mientras que el estilo en línea no nos permite diseñar con pseudoclase, pero aprenderemos cómo aplicar el estilo al pasar el mouse en CSS en línea usando eventos del mouse en este artículo.

Cómo aplicar estilo al pasar el mouse en React con estilo externo CSS

Esto es muy similar a cómo funcionan HTML y CSS; todo lo que tenemos que hacer es darle al elemento un nombre de clase (no clase) o usar la etiqueta como el selector al que apuntaríamos y luego diseñar la pseudo clase flotante:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

Todo lo que hicimos fue agregar la pseudo clase :hover al selector previamente diseñado y cambiar cualquiera de las propiedades que queríamos cambiar cuando el mouse estaba sobre el elemento.

Cómo aplicar estilo al pasar el mouse por encima en React con estilo en línea {#cómo aplicar estilo al pasar el mouse por encima en reacción dentro del estilo en línea}

Por estilo en línea, nos referimos al estilo a través de la etiqueta del elemento, que se logra con el atributo estilo. Si queremos convertir el código anterior al estilo en línea:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Tener estilos como este repetidos dentro de nuestra aplicación podría dificultar la lectura, por lo que podríamos crear un objeto de estilo si solo estamos diseñando un solo objeto en una página, y no hay necesidad de crear un archivo para él:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Hasta ahora, hemos construido nuestra caja. Para cambiar el estilo con CSS en línea en React, establecemos estilos en línea condicionalmente usando un estado, así como los accesorios onMouseEnter y onMouseLeave, que nos dicen cuándo el mouse está sobre el elemento y cuándo no:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

En este punto, podemos diseñar condicionalmente cualquier propiedad usando el estado *isHover*:

1
2
3
4
const boxStyle = {
   //...
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

Hasta ahora, hemos visto cómo implementarlo. Ahora, analicemos nuestro código y expliquemos por qué usamos la sintaxis que usamos. Comenzamos creando un estado que almacena un valor booleano que indica cuándo se produce el desplazamiento (true) y en caso contrario (de forma predeterminada, se establece en false):

1
const [isHover, setIsHover] = useState(false);

Luego, también agregamos dos eventos al div para ayudar a cambiar nuestro estado y saber cuándo el mouse está en el cuadro y cuándo está fuera del cuadro:

1
2
3
4
5
6
7
<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

El evento onMouseEnter se activa cuando el mouse ingresa al elemento, mientras que el evento onMouseLeave se activa cuando se va. Asignamos una función a cada uno de estos eventos, que ahora usamos para cambiar el estado:

1
2
3
4
5
6
7
const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

Establecemos el estado en cada función en función del evento desencadenado. Finalmente, podemos usar el estado para diseñar condicionalmente el cuadro no solo para backgroundColor, sino también para cualquier otro estilo:

1
2
3
4
5
const boxStyle = {
   //...
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

Cuando juntamos todo esto, ahora podemos cambiar el estilo al pasar el mouse por encima en React con el estilo Inline:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;

Conclusión

En este artículo, aprendimos cómo aplicar estilo al pasar el mouse por encima en React usando estilos externos y estilos en línea. Aunque no se recomienda el estilo en línea, es útil comprender cómo funciona en caso de que se nos solicite usarlo.