Sådan styles hover i React

Introduktion

At arbejde med visuals er en glimrende måde at holde vores grænseflade interaktiv og fange brugerens opmærksomhed. At have objekter animeret på vores skærm skaber en unik oplevelse og øger interaktivitet.

I denne artikel vil vi lære, hvordan man style hover i React ved hjælp af CSS, samt hvordan man laver inline hover-styling.

Hover er en pseudo-klasse, der simpelthen giver os mulighed for at tilføje specifikke stilarter for at gøre en bruger opmærksom på, når deres mus er tændt og slukket for et bestemt element. Til denne artikel bruger vi en boks:

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

som har denne grundlæggende stil:

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

Grundlæggende vil vi ændre baggrundsfarven til lightblue når musen er over boksen, og returner den derefter til standardstilen, når musen fjernes.

Sådan styles hover i React

Der er to tilgange til dette: ekstern og inline. Ekstern involverer at have en separat CSS-fil, der gør det nemt at style til hover, hvorimod inline styling ikke tillader os at style med pseudo-klasse, men vi vil lære at style hover i inline CSS ved at bruge musehændelser i denne artikel.

Sådan styles hover i reaktion med ekstern CSS-styling

Dette minder meget om, hvordan HTML og CSS fungerer; alt vi skal gøre er at give elementet a className (Ikke class) eller brug tagget som den vælger, som vi vil målrette mod, og stil derefter 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 at tilføje :hover pseudo-klasse til den tidligere stylede vælger og ændre enhver af de egenskaber, vi ønskede at ændre, når musen var over elementet.

Sådan styles hover i reaktion med inline-styling

Med inline styling mener vi styling via elementets tag, som udføres med style attribut. Hvis vi ønsker at konvertere den foregående kode 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>
   );
};

At få stilarter som dette gentaget i vores app kan gøre det svært at læse, så vi kunne oprette et stilobjekt, hvis vi kun styler et enkelt objekt på en side, og der ikke er behov for at oprette en fil til 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>
   );
};

Indtil videre har vi bygget vores boks. For at svæve stil med inline CSS i React, indstiller vi betinget inline-stile ved hjælp af en tilstand, såvel som onMouseEnter , onMouseLeave rekvisitter, som fortæller os, hvornår musen er på elementet, og hvornår den ikke er:

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 tidspunkt kan vi betinget style enhver ejendom ved hjælp af *isHover* stat:

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

Indtil videre har vi set, hvordan man implementerer det. Lad os nu nedbryde vores kode og forklare, hvorfor vi brugte den syntaks, vi gjorde. Vi startede med at oprette en tilstand, der gemmer en boolesk værdi, der angiver, hvornår svævning forekommer (true) og ellers (som standard er den indstillet til false):

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

Vi har derefter også tilføjet to begivenheder til div'en for at hjælpe med at ændre vores tilstand og vide, hvornår musen er på boksen, og hvornår den er ude af boksen:

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

onMouseEnter hændelsen udløses, når musen går ind i elementet, mens onMouseLeave hændelsen udløses, når den forlader. Vi tildelte en funktion til hver af disse hændelser, som vi nu bruger til at ændre tilstanden:

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

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

Vi indstiller state i hver funktion baseret på den udløste hændelse. Endelig kan vi bruge staten til at betinget style boksen ikke kun for backgroundColor, men også til enhver anden stil:

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

Når vi sætter alt dette sammen, er vi nu i stand til at style-hovere 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;

Konklusion

Vi lærte at style hover i React ved at bruge både ekstern styling og inline styling i denne artikel. Selvom inline-styling ikke anbefales, er det nyttigt at forstå, hvordan det fungerer, hvis vi bliver bedt om at bruge det.