วิธีจัดสไตล์โฮเวอร์ใน React

บทนำ

การทำงานกับภาพเป็นวิธีที่ยอดเยี่ยมในการทำให้อินเทอร์เฟซของเรามีการโต้ตอบและดึงดูดความสนใจของผู้ใช้ การมีวัตถุเคลื่อนไหวบนหน้าจอของเราจะสร้างประสบการณ์ที่ไม่เหมือนใครและเพิ่มการโต้ตอบ

ในบทความนี้ เราจะเรียนรู้วิธีจัดรูปแบบโฮเวอร์ใน React โดยใช้ CSS รวมถึงวิธีการจัดสไตล์โฮเวอร์แบบอินไลน์

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 เมื่อเมาส์อยู่เหนือกล่องแล้วกลับสู่รูปแบบเริ่มต้นเมื่อถอดเมาส์ออก

วิธีจัดสไตล์โฮเวอร์ใน React

มีสองวิธีในการทำเช่นนี้: ภายนอกและแบบอินไลน์ ภายนอกเกี่ยวข้องกับการมีไฟล์ CSS แยกต่างหากที่ทำให้จัดรูปแบบสำหรับโฮเวอร์ได้ง่าย ในขณะที่การจัดสไตล์อินไลน์ไม่อนุญาตให้เราจัดสไตล์ด้วยคลาสหลอก แต่เราจะเรียนรู้วิธีจัดรูปแบบโฮเวอร์ใน CSS แบบอินไลน์โดยใช้เหตุการณ์ของเมาส์ในบทความนี้

วิธีจัดสไตล์โฮเวอร์ในการตอบสนองด้วยการจัดสไตล์ภายนอก CSS

สิ่งนี้คล้ายกับวิธีการทำงานของ HTML และ CSS มาก สิ่งที่เราต้องทำคือให้องค์ประกอบ a className (ยังไม่ class) หรือใช้แท็กเป็นตัวเลือกที่เราจะกำหนดเป้าหมายแล้วจัดรูปแบบคลาสหลอกแบบโฮเวอร์:

.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 คลาสหลอกไปยังตัวเลือกที่มีรูปแบบก่อนหน้านี้ และเปลี่ยนคุณสมบัติใดๆ ที่เราต้องการเปลี่ยนเมื่อเมาส์อยู่เหนือองค์ประกอบ

วิธีจัดสไตล์โฮเวอร์ในการตอบสนองด้วยสไตล์อินไลน์

โดยการจัดสไตล์แบบอินไลน์ เราหมายถึงการจัดสไตล์ผ่านแท็กขององค์ประกอบ ซึ่งทำได้ด้วยเครื่องหมาย 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>
   );
};

จนถึงตอนนี้ เราได้สร้างกล่องของเราแล้ว ในการจัดสไตล์โฮเวอร์ด้วย 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 ในแต่ละฟังก์ชันตามเหตุการณ์ที่ทริกเกอร์ สุดท้าย เราสามารถใช้ state เพื่อกำหนดรูปแบบกล่องตามเงื่อนไข ไม่เพียงแต่สำหรับ backgroundColorแต่สำหรับสไตล์อื่นๆ:

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

เมื่อเรารวมทั้งหมดนี้เข้าด้วยกัน ตอนนี้เราสามารถจัดสไตล์โฮเวอร์ใน React ด้วยสไตล์อินไลน์ได้:

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;

สรุป

เราได้เรียนรู้วิธีการจัดรูปแบบโฮเวอร์ใน React โดยใช้ทั้งสไตล์ภายนอกและสไตล์อินไลน์ในบทความนี้ แม้ว่าจะไม่แนะนำให้ใส่สไตล์อินไลน์ แต่การทำความเข้าใจวิธีการทำงานก็มีประโยชน์ในกรณีที่เราได้รับแจ้งให้ใช้