Kako oblikovati hover v React

Predstavitev

Delo z vizualnimi elementi je odličen način, da ohranimo naš vmesnik interaktiven in pritegnemo pozornost uporabnika. Z animiranimi predmeti na našem zaslonu ustvarimo edinstveno izkušnjo in povečamo interaktivnost.

V tem članku se bomo naučili, kako oblikovati lebdenje v Reactu s pomočjo CSS, pa tudi, kako narediti stilsko oblikovanje lebdenja v vrstici.

Hover je psevdorazred, ki nam preprosto omogoča dodajanje posebnih slogov, da uporabnika opozorimo, kdaj je njegova miška vklopljena ali izklopljena na določen element. Za ta članek bomo uporabili polje:

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

ki ima ta osnovni 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;
}

V bistvu bomo spremenili barvo ozadja v lightblue ko je miška nad poljem in jo nato vrne v privzeti slog, ko miško odstranite.

Kako oblikovati hover v React

Za to obstajata dva pristopa: zunanji in inline. Zunanje vključuje ločeno datoteko CSS, ki olajša oblikovanje za lebdenje, medtem ko nam vgrajeno oblikovanje ne omogoča oblikovanja s psevdorazredom, vendar se bomo v tem članku naučili, kako oblikovati lebdenje v vgrajenem CSS z uporabo dogodkov miške.

Kako oblikovati hover v React z zunanjim stilom CSS

To je zelo podobno delovanju HTML in CSS; vse kar moramo storiti je, da podamo element a className (Nisi class) ali uporabite oznako kot izbirnik, na katerega bi ciljali, in nato oblikujte psevdo razred lebdenja:

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

Vse, kar smo naredili, je bilo, da smo dodali :hover psevdorazred na predhodno stiliziran izbirnik in spremeni katero koli od lastnosti, ki smo jih želeli spremeniti, ko je bila miška nad elementom.

Kako oblikovati lebdenje v Reactu z vgrajenim slogom

Z vgrajenim slogom mislimo na stil prek oznake elementa, ki se doseže z style atribut. Če želimo prejšnjo kodo pretvoriti v vgrajeni slog:

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

Ponavljanje takšnih slogov v naši aplikaciji bi lahko otežilo branje, zato bi lahko ustvarili slogovni objekt, če bi oblikovali samo en sam predmet na strani in zanj ni treba ustvarjati datoteke:

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

Do sedaj smo zgradili svojo škatlo. Za stilsko lebdenje z vgrajenim CSS v Reactu pogojno nastavimo vgrajene sloge z uporabo stanja, kot tudi onMouseEnter in onMouseLeave props, ki nam povedo, kdaj je miška na elementu in kdaj ne:

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

Na tej točki lahko pogojno oblikujemo katero koli lastnost z uporabo *isHover* država:

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

Doslej smo videli, kako to izvajati. Zdaj pa razčlenimo našo kodo in razložimo, zakaj smo uporabili takšno sintakso. Začeli smo z ustvarjanjem stanja, ki shrani logično vrednost, ki označuje, kdaj pride do lebdenja (true) in drugače (privzeto je nastavljeno na false):

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

Nato smo divu dodali tudi dva dogodka, ki pomagata spremeniti naše stanje in vedeti, kdaj je miška na škatli in kdaj je izven škatle:

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

O onMouseEnter dogodek se sproži, ko miška vstopi v element, medtem ko se onMouseLeave dogodek se sproži, ko zapusti. Vsakemu od teh dogodkov smo dodelili funkcijo, ki jo zdaj uporabljamo za spreminjanje stanja:

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

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

Postavili smo state v vsaki funkciji glede na sproženi dogodek. Končno lahko uporabimo stanje za pogojno oblikovanje polja ne le za backgroundColor, ampak tudi za kateri koli drug stil:

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

Ko vse to združimo, lahko zdaj oblikujemo lebdenje v React s slogom 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;

zaključek

V tem članku smo se naučili, kako stilizirati lebdenje v Reactu z uporabo zunanjega sloga in stila v vrstici. Čeprav oblikovanje v vrstici ni priporočljivo, je koristno razumeti, kako deluje, če smo pozvani, da ga uporabimo.