از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش Style Hover در ReactWorking با تصاویر، یک راه عالی برای تعاملی نگه داشتن رابط ما و جلب توجه کاربر است. داشتن اشیاء متحرک روی صفحه ما یک تجربه منحصر به فرد ایجاد می کند و تعامل را افزایش می دهد. در این مقاله ، ما یاد خواهیم گرفت که چگونه می توان با استفاده از CSS ، و همچنین روش …
سرفصلهای مطلب
معرفی
کار با تصاویر یک روش عالی برای حفظ تعاملی رابط کاربری ما و جلب توجه کاربر است. داشتن اشیاء متحرک روی صفحه نمایش ما یک تجربه منحصر به فرد ایجاد می کند و تعامل را افزایش می دهد.
در این مقاله روش استایل دادن به شناور در 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>
);
};
تکرار سبک‌هایی مانند این در برنامه ما می‌تواند خواندن آن را دشوار کند، بنابراین اگر فقط یک شیء را استایل می‌دهیم می‌توانیم یک شیء سبک ایجاد کنیم. روی آ pageو نیازی به ایجاد فایل برای آن نیست:
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 در هر تابع مبتنی بر روی رویداد ایجاد شده سرانجام ، ما می توانیم از دولت استفاده کنیم تا جعبه ای را به صورت مشروط به سبک سبک و نه تنها برای آن سبک کنیم backgroundColor، بلکه برای هر سبک دیگری:
const boxStyle = {
//...
backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
color: isHover ? 'red' : 'green',
};
وقتی همه اینها را کنار هم قرار دادیم ، اکنون می توانیم با سبک درون خطی که در حال واکنش است ، سبک را به سبک خود نشان دهیم:
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 سبک شود. اگرچه یک ظاهر طراحی شده درون خطی توصیه نمی شود ، درک این مسئله در صورتی که از ما خواسته شود از آن استفاده کنیم ، مفید است.
منتشر شده در 1403-01-07 11:21:03
