Slik stiler du hover i React

Introduksjon

Å jobbe med visuelle elementer er en utmerket måte å holde grensesnittet vårt interaktivt og fange brukerens oppmerksomhet. Å ha objekter animert på skjermen vår skaper en unik opplevelse og øker interaktiviteten.

I denne artikkelen vil vi lære hvordan du stiler hover i React ved hjelp av CSS, samt hvordan du gjør inline svevestyling.

Hover er en pseudo-klasse som ganske enkelt lar oss legge til spesifikke stiler for å gjøre en bruker oppmerksom på når musen er på og av et bestemt element. For denne artikkelen bruker vi en boks:

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

som har denne grunnleggende stilen:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

I hovedsak vil vi endre bakgrunnsfargen til lightblue når musen er over boksen og deretter tilbake til standardstilen når musen fjernes.

Slik stiler du hover i React

Det er to tilnærminger til dette: ekstern og inline. Ekstern innebærer å ha en egen CSS-fil som gjør det enkelt å style for hover, mens inline styling ikke tillater oss å style med pseudo-klasse, men vi vil lære hvordan du style hover i inline CSS ved å bruke musehendelser i denne artikkelen.

Slik stiler du sveve i reaksjon med ekstern CSS-styling

Dette er veldig likt hvordan HTML og CSS fungerer; alt vi trenger å gjøre er å gi elementet a className (ikke class) eller bruk taggen som velgeren vi vil målrette mot, og stil deretter hover-pseudoklassen:

.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;
}

Alt vi gjorde var å legge til :hover pseudo-klassen til den tidligere stilede velgeren og endre noen av egenskapene vi ønsket å endre når musen var over elementet.

Hvordan style hover i reaksjon med inline styling

Med inline styling mener vi styling via elementets tag, som oppnås med style Egenskap. Hvis vi ønsker å konvertere den foregående koden til inline styling:

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>
   );
};

Å ha stiler som dette gjentatt i appen vår kan gjøre det vanskelig å lese, så vi kan lage et stilobjekt hvis vi bare styler et enkelt objekt på en side, og det ikke er behov for å lage en fil for det:

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>
   );
};

Så langt har vi bygget boksen vår. For å stile sveve med innebygd CSS i React, setter vi betinget innebygde stiler ved hjelp av en tilstand, samt onMouseEnter og onMouseLeave rekvisitter, som forteller oss når musen er på elementet og når den ikke er det:

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>
   );
};

På dette tidspunktet kan vi betinget style enhver eiendom ved å bruke *isHover* stat:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

Så langt har vi sett hvordan vi implementerer det. La oss nå bryte ned koden vår og forklare hvorfor vi brukte syntaksen vi gjorde. Vi begynte med å opprette en tilstand som lagrer en boolsk verdi som indikerer når sveving skjer (true) og ellers (som standard er den satt til false):

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

Vi har da også lagt til to hendelser til div for å hjelpe til med å endre tilstanden vår og vite når musen er på esken og når den er av esken:

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

De onMouseEnter hendelsen utløses når musen går inn i elementet, mens onMouseLeave hendelsen utløses når den forlater. Vi tildelte en funksjon til hver av disse hendelsene, som vi nå bruker til å endre tilstanden:

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

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

Vi setter inn state i hver funksjon basert på den utløste hendelsen. Endelig kan vi bruke staten til å betinget style boksen ikke bare for backgroundColor, men også for enhver annen stil:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

Når vi setter alt dette sammen, er vi nå i stand til å style sveve i React with Inline-stil:

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;

konklusjonen

Vi lærte hvordan du stiler hover i React ved å bruke både ekstern styling og inline styling i denne artikkelen. Selv om inline styling ikke anbefales, er det nyttig å forstå hvordan det fungerer i tilfelle vi blir bedt om å bruke det.