Cómo cambiar el estilo de Hover en React

Introducción

Trabajar con imágenes 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 hacer un estilo 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:

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

que tiene este estilo básico:

.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 lightblue cuando el mouse está sobre el cuadro y luego lo devuelve a su estilo predeterminado cuando se quita 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 diseñar Hover 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 className (¿No estás registrado como class) o use la etiqueta como el selector al que apuntaríamos y luego diseñe la pseudo clase flotante:

.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 el :hover pseudo clase al selector previamente diseñado y cambiar cualquiera de las propiedades que queríamos cambiar cuando el mouse estaba sobre el elemento.

Cómo cambiar el estilo de Hover en React con 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 style atributo. Si queremos convertir el código anterior al estilo en línea:

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:

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 diseñar el desplazamiento con CSS en línea en React, establecemos estilos en línea condicionalmente usando un estado, así como el onMouseEnter y onMouseLeave props, que nos dicen cuando el ratón está sobre el elemento y cuando no:

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 *isHover* estado:

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 ocurre el desplazamiento (true) y de lo contrario (por defecto está configurado en false):

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:

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

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

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

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

Establecemos el state 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, pero también para cualquier otro estilo:

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:

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 a aplicar estilos 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.