Wie man den Hover in React gestaltet

Einleitung

Die Arbeit mit visuellen Elementen ist eine hervorragende Möglichkeit, unsere Benutzeroberfläche interaktiv zu halten und die Aufmerksamkeit des Benutzers zu gewinnen. Die Animation von Objekten auf unserem Bildschirm schafft ein einzigartiges Erlebnis und erhöht die Interaktivität.

In diesem Artikel lernen wir, wie man Hover in React mit CSS gestaltet und wie man Inline-Hover-Styling durchführt.

Hover ist eine Pseudo-Klasse, die es uns einfach ermöglicht, bestimmte Stile hinzuzufügen, um einen Benutzer darauf aufmerksam zu machen, wenn seine Maus ein bestimmtes Element ein- und ausschaltet. Für diesen Artikel verwenden wir eine Box:

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

die dieses grundlegende Styling hat:

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

Im Wesentlichen ändern wir die Hintergrundfarbe in lightblue wenn sich die Maus über dem Feld befindet, und es dann auf seinen Standardstil zurücksetzen, wenn die Maus entfernt wird.

Wie man den Hover in React gestaltet

Dafür gibt es zwei Ansätze: extern und inline. Extern beinhaltet eine separate CSS-Datei, die es einfach macht, Hover zu stylen, während Inline-Styling es uns nicht erlaubt, mit Pseudo-Klassen zu stylen, aber wir werden lernen, wie man Hover in Inline-CSS mithilfe von Mausereignissen in diesem Artikel stylen kann.

So stylen Sie Hover in React With CSS External Styling

Dies ist der Funktionsweise von HTML und CSS sehr ähnlich; alles, was wir tun müssen, ist das Element a anzugeben className (Nicht class) oder verwenden Sie das Tag als den Selektor, auf den wir abzielen, und gestalten Sie dann die Hover-Pseudoklasse:

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

Alles, was wir getan haben, war das hinzufügen :hover Pseudo-Klasse auf den zuvor gestalteten Selektor und ändern Sie alle Eigenschaften, die wir ändern wollten, wenn sich die Maus über dem Element befand.

So stylen Sie Hover in React mit Inline-Styling

Mit Inline-Styling meinen wir das Stylen über das Tag des Elements, was mit dem erreicht wird style Attribut. Wenn wir den vorangehenden Code in Inline-Styling konvertieren möchten:

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

Wenn Stile wie dieser in unserer App wiederholt werden, kann dies das Lesen erschweren. Wir könnten also ein Stilobjekt erstellen, wenn wir nur ein einzelnes Objekt auf einer Seite gestalten, und es besteht keine Notwendigkeit, eine Datei dafür zu erstellen:

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

Bisher haben wir unsere Box gebaut. Um Hover mit Inline-CSS in React zu stylen, setzen wir bedingt Inline-Stile mit einem Zustand sowie der onMouseEnter und onMouseLeave Requisiten, die uns sagen, wann sich die Maus auf dem Element befindet und wann nicht:

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

An diesem Punkt können wir jede Eigenschaft unter Verwendung von bedingt formatieren *isHover* Zustand:

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

Bisher haben wir gesehen, wie man es umsetzt. Lassen Sie uns nun unseren Code aufschlüsseln und erklären, warum wir die von uns verwendete Syntax verwendet haben. Wir haben damit begonnen, einen Zustand zu erstellen, der einen booleschen Wert speichert, der angibt, wann das Schweben auftritt (true) und andernfalls (standardmäßig ist es auf false):

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

Wir haben dann auch zwei Ereignisse zum div hinzugefügt, um unseren Status zu ändern und zu wissen, wann sich die Maus auf der Box befindet und wann sie nicht auf der Box ist:

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

Das onMouseEnter Ereignis wird ausgelöst, wenn die Maus das Element betritt, während das onMouseLeave Das Ereignis wird beim Verlassen ausgelöst. Jedem dieser Ereignisse haben wir eine Funktion zugeordnet, mit der wir nun den Zustand ändern:

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

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

Wir setzen die state in jeder Funktion basierend auf dem ausgelösten Ereignis. Schließlich können wir den Zustand verwenden, um die Box nicht nur bedingt zu stylen backgroundColor, aber auch für jeden anderen Stil:

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

Wenn wir all dies zusammenfügen, können wir jetzt den Hover in React mit Inline-Stil 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;

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man den Hover in React sowohl mit externem Styling als auch mit Inline-Styling gestaltet. Obwohl Inline-Styling nicht empfohlen wird, ist es hilfreich zu verstehen, wie es funktioniert, falls wir dazu aufgefordert werden.