نحوه استایل دادن به Hover در 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 هنگامی که ماوس روی جعبه قرار دارد و پس از حذف ماوس، آن را به سبک پیش فرض خود برگردانید.

نحوه استایل دادن به Hover در React

دو رویکرد برای این وجود دارد: خارجی و درونی. خارجی شامل داشتن یک فایل CSS جداگانه است که استایل کردن را برای شناور آسان می کند، در حالی که استایل درون خطی به ما اجازه نمی دهد با کلاس شبه استایل کنیم، اما نحوه استایل دادن به شناور در CSS درون خطی را با استفاده از رویدادهای ماوس در این مقاله یاد خواهیم گرفت.

نحوه استایل کردن Hover در React با استایل خارجی 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 کلاس شبه را به انتخابگر استایل‌گذاری‌شده قبلی تغییر دهید و هر یک از ویژگی‌هایی را که می‌خواستیم وقتی ماوس روی عنصر قرار داشت تغییر دهیم.

نحوه استایل کردن Hover در React با 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>
   );
};

تا به حال، ما جعبه خود را ساخته ایم. برای استایل دادن به شناور با CSS درون خطی در React، استایل های درون خطی را به صورت مشروط با استفاده از یک وضعیت و همچنین onMouseEnter و onMouseLeave props، که به ما می گوید چه زمانی ماوس روی عنصر است و چه زمانی نیست:

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>

La 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',
};

وقتی همه اینها را کنار هم گذاشتیم، اکنون می‌توانیم به استایل شناور در React با سبک 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;

نتیجه

نحوه استایل دادن به شناور در React را با استفاده از استایل خارجی و استایل درون خطی در این مقاله آموختیم. اگرچه استایل درون خطی توصیه نمی شود، اما درک نحوه عملکرد آن در صورتی که از ما خواسته شود از آن استفاده کنیم مفید است.