Hover in React stylen

Introductie

Werken met visuals is een uitstekende manier om onze interface interactief te houden en de aandacht van de gebruiker te trekken. Door objecten op ons scherm te laten animeren, ontstaat een unieke ervaring en verhoogt het de interactiviteit.

In dit artikel zullen we leren hoe je hover in React kunt stylen met CSS, en hoe je inline hover-styling kunt doen.

Hover is een pseudo-klasse die ons eenvoudig in staat stelt om specifieke stijlen toe te voegen om een ​​gebruiker bewust te maken wanneer zijn muis aan of uit staat voor een specifiek element. Voor dit artikel gebruiken we een doos:

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

die deze basisstijl heeft:

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

In wezen veranderen we de achtergrondkleur in lightblue wanneer de muis zich boven het vak bevindt en zet het vervolgens terug in de standaardstijl wanneer de muis wordt verwijderd.

Hover in React stylen

Er zijn twee benaderingen hiervoor: extern en inline. Extern omvat het hebben van een apart CSS-bestand dat het gemakkelijk maakt om te stylen voor hover, terwijl inline styling ons niet toestaat om te stylen met pseudo-klasse, maar we zullen in dit artikel leren hoe we hover in inline CSS kunnen stylen door muisgebeurtenissen te gebruiken.

Hoe te Style Hover in Reageren met CSS Externe Styling

Dit lijkt erg op hoe HTML en CSS werken; het enige wat we hoeven te doen is het element a . geven className (Niet class) of gebruik de tag als de selector die we zouden targeten en style vervolgens de hover pseudo-klasse:

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

Het enige wat we deden was de . toevoegen :hover pseudo-klasse naar de eerder gestileerde selector en verander een van de eigenschappen die we wilden veranderen toen de muis over het element ging.

Hover stylen in Reageren met inline styling

Met inline styling bedoelen we styling via de tag van het element, wat wordt bereikt met de style attribuut. Als we de voorgaande code willen converteren naar 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>
   );
};

Als stijlen zoals deze in onze app worden herhaald, kan het moeilijk te lezen zijn, dus we zouden een stijlobject kunnen maken als we slechts een enkel object op een pagina stylen, en het is niet nodig om er een bestand voor te maken:

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

Tot nu toe hebben we onze box gebouwd. Om hover met inline CSS in React te stylen, stellen we voorwaardelijk inline stijlen in met behulp van een status, evenals de onMouseEnter en onMouseLeave rekwisieten, die ons vertellen wanneer de muis zich op het element bevindt en wanneer niet:

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

Op dit moment kunnen we elke eigenschap voorwaardelijk stylen met behulp van de *isHover* staat:

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

Tot nu toe hebben we gezien hoe we het kunnen implementeren. Laten we nu onze code opsplitsen en uitleggen waarom we de syntaxis hebben gebruikt die we hebben gebruikt. We zijn begonnen met het maken van een status waarin een booleaanse waarde wordt opgeslagen die aangeeft wanneer zweven plaatsvindt (true) en anders (standaard is dit ingesteld op false):

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

We hebben vervolgens ook twee gebeurtenissen aan de div toegevoegd om onze status te helpen wijzigen en te weten wanneer de muis op de doos zit en wanneer deze niet uit de doos is:

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

De onMouseEnter gebeurtenis wordt geactiveerd wanneer de muis het element binnengaat, terwijl de onMouseLeave gebeurtenis wordt geactiveerd wanneer deze vertrekt. We hebben aan elk van deze gebeurtenissen een functie toegewezen, die we nu gebruiken om de status te wijzigen:

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

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

We hebben de state in elke functie op basis van de geactiveerde gebeurtenis. Ten slotte kunnen we de staat gebruiken om de doos voorwaardelijk te stylen, niet alleen voor backgroundColor, maar ook voor elke andere stijl:

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

Als we dit allemaal samenvoegen, kunnen we nu de hover in React with Inline style stylen:

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;

Conclusie

In dit artikel hebben we geleerd hoe je hover in React kunt stylen met zowel externe styling als inline styling. Hoewel inline-styling niet wordt aanbevolen, is het handig om te begrijpen hoe het werkt voor het geval we worden gevraagd om het te gebruiken.