Πώς να δώσετε στυλ στο Hover στο React

Εισαγωγή

Η εργασία με γραφικά είναι ένας εξαιρετικός τρόπος για να διατηρήσουμε τη διεπαφή μας διαδραστική και να τραβήξουμε την προσοχή του χρήστη. Το να έχουμε κινούμενα αντικείμενα στην οθόνη μας δημιουργεί μια μοναδική εμπειρία και αυξάνει τη διαδραστικότητα.

Σε αυτό το άρθρο, θα μάθουμε πώς να διαμορφώνουμε το στυλ hover στο React χρησιμοποιώντας CSS, καθώς και πώς να κάνουμε ενσωματωμένο στυλ hover.

Το Hover είναι μια ψευδοκλάση που απλώς μας επιτρέπει να προσθέτουμε συγκεκριμένα στυλ για να ενημερώνουμε έναν χρήστη πότε το ποντίκι του είναι ενεργοποιημένο και απενεργοποιημένο σε ένα συγκεκριμένο στοιχείο. Για αυτό το άρθρο, θα χρησιμοποιήσουμε ένα πλαίσιο:

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

που έχει αυτό το βασικό στυλ:

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

Ουσιαστικά, θα αλλάξουμε το χρώμα φόντου σε lightblue όταν το ποντίκι βρίσκεται πάνω από το πλαίσιο και, στη συνέχεια, επιστρέψτε το στο προεπιλεγμένο στυλ του όταν αφαιρεθεί το ποντίκι.

Πώς να δώσετε στυλ στο Hover στο React

Υπάρχουν δύο προσεγγίσεις σε αυτό: εξωτερική και ενσωματωμένη. Το εξωτερικό περιλαμβάνει την ύπαρξη ενός ξεχωριστού αρχείου CSS που διευκολύνει το στυλ για την τοποθέτηση του ποντικιού, ενώ το ενσωματωμένο στυλ δεν μας επιτρέπει να διαμορφώνουμε στυλ με ψευδο-κλάση, αλλά θα μάθουμε πώς να διαμορφώνουμε το στυλ του hover σε ενσωματωμένο CSS χρησιμοποιώντας συμβάντα ποντικιού σε αυτό το άρθρο.

Πώς να δώσετε στυλ στο Hover στο React με εξωτερικό στυλ CSS

Αυτό μοιάζει πολύ με το πώς λειτουργούν τα HTML και CSS. το μόνο που έχουμε να κάνουμε είναι να δώσουμε το στοιχείο α className (Δεν είστε ο/η class) ή χρησιμοποιήστε την ετικέτα ως τον επιλογέα που θα στοχεύαμε και, στη συνέχεια, το στυλ της ψευδοκλάσης hover:

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

Το μόνο που κάναμε ήταν να προσθέσουμε το :hover ψευδοκλάση στον προηγουμένως διαμορφωμένο επιλογέα και αλλάξτε οποιαδήποτε από τις ιδιότητες που θέλαμε να αλλάξουμε όταν το ποντίκι ήταν πάνω από το στοιχείο.

Πώς να κάνετε στυλ Hover στο React With Inline Styling

Με τον όρο inline styling, εννοούμε το στυλ μέσω της ετικέτας του στοιχείου, το οποίο επιτυγχάνεται με το style Χαρακτηριστικό. Αν θέλουμε να μετατρέψουμε τον προηγούμενο κώδικα σε ενσωματωμένο στυλ:

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

Η επανάληψη τέτοιων στυλ εντός της Εφαρμογής μας θα μπορούσε να δυσκολέψει την ανάγνωση, επομένως θα μπορούσαμε να δημιουργήσουμε ένα αντικείμενο στυλ εάν διαμορφώνουμε μόνο ένα αντικείμενο σε μια σελίδα και δεν χρειάζεται να δημιουργήσουμε ένα αρχείο για αυτό:

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

Μέχρι στιγμής, έχουμε φτιάξει το κουτί μας. Για το στυλ του hover με ενσωματωμένο CSS στο React, ορίζουμε υπό όρους ενσωματωμένα στυλ χρησιμοποιώντας μια κατάσταση, καθώς και το onMouseEnter και onMouseLeave στηρίγματα, τα οποία μας λένε πότε το ποντίκι βρίσκεται στο στοιχείο και πότε όχι:

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

Σε αυτό το σημείο, μπορούμε να διαμορφώσουμε υπό όρους οποιαδήποτε ιδιοκτησία χρησιμοποιώντας το *isHover* κατάσταση:

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

Μέχρι στιγμής, έχουμε δει πώς να το εφαρμόσουμε. Τώρα, ας αναλύσουμε τον κώδικά μας και ας εξηγήσουμε γιατί χρησιμοποιήσαμε τη σύνταξη που κάναμε. Ξεκινήσαμε δημιουργώντας μια κατάσταση που αποθηκεύει μια δυαδική τιμή που υποδεικνύει πότε εμφανίζεται η αιώρηση (true) και διαφορετικά (από προεπιλογή έχει οριστεί σε false):

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

Στη συνέχεια, προσθέσαμε δύο συμβάντα στο div για να βοηθήσουμε στην αλλαγή της κατάστασής μας και να γνωρίζουμε πότε το ποντίκι βρίσκεται στο κουτί και πότε είναι εκτός κουτιού:

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

Η onMouseEnter Το συμβάν ενεργοποιείται όταν το ποντίκι εισέρχεται στο στοιχείο, ενώ το onMouseLeave το συμβάν ενεργοποιείται όταν φεύγει. Εκχωρήσαμε μια συνάρτηση σε καθένα από αυτά τα συμβάντα, την οποία χρησιμοποιούμε τώρα για να αλλάξουμε την κατάσταση:

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

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

Ρυθμίζουμε το state σε κάθε συνάρτηση με βάση το συμβάν που ενεργοποιήθηκε. Τέλος, μπορούμε να χρησιμοποιήσουμε την κατάσταση για να διαμορφώσουμε υπό όρους το πλαίσιο όχι μόνο για backgroundColor, αλλά και για οποιοδήποτε άλλο στυλ:

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

Όταν τα συγκεντρώσουμε όλα αυτά, μπορούμε πλέον να διαμορφώσουμε στυλ hover στο React with Inline style:

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;

Συμπέρασμα

Μάθαμε πώς να διαμορφώνουμε το στυλ του hover στο React χρησιμοποιώντας τόσο εξωτερικό στυλ όσο και ενσωματωμένο στυλ σε αυτό το άρθρο. Αν και το inline στυλ δεν συνιστάται, είναι χρήσιμο να κατανοήσουμε πώς λειτουργεί σε περίπτωση που μας ζητηθεί να το χρησιμοποιήσουμε.