پسودوکلاس :hover در CSS برای هدف‌گیری از یک المان زمانی که کاربر با موس روی آن حرکت می‌کند، استفاده می‌شود. هدف این پسودوکلاس اعمال استایل‌ها یا فعال‌کردن رفتارهای خاص برای افزایش تجربه کاربری یا ارائه بازخورد بصری اضافی است.
:pseudo_class::hover یک ابزار است برای ایجاد المان‌های تعاملی با دینامیک و جذاب بدون نیاز به هر گونه ورودی از کاربر به غیر از حرکت ماوس.
اعمال به اعمال به عناصر HTML مانند دکمه‌ها، لینک‌ها، تصاویر و غیره.
سینتکس DOM
:hover {
/* ... */
}این پسودوکلاس به‌عنوان یک انتخابگر CSS مورد استفاده قرار می‌گیرد تا وقتی کاربر با ماوس روی المان حرکت می‌کند، استایل‌های مشخصی را اعمال کند.
With Background-color Property
این کد HTML و CSS یک مثال از تغییر رنگ پس زمینه یک لینک هنگامی که روی آن ماوس حرکت می کند را نشان می دهد.
<html>
<head>
<style>
div {
padding: 1rem;
}
a {
background-color: rgb(238, 135, 9); /* رنگ پس زمینه پیش‌فرض */
font-size: 1rem;
padding: 5px;
}
a:hover {
background-color: rgb(235, 235, 169); /* رنگ پس زمینه هنگام hover */
}
</style>
</head>
<body>
<div>
<h3>Hover example - link</h3>
<a href="#">Hover over to see the color change!!!</a>
</div>
</body>
</html>وقتی کاربر ماوس را روی لینک می‌برد، پس‌زمینه لینک از رنگ پیش‌فرض به رنگ دیگری تغییر می‌کند. این تغییر به کاربر اطلاع می‌دهد که لینک قابلیت کلیک دارد.
With Button Effect
این کد HTML و CSS یک مثال از تغییر رنگ پس زمینه یک دکمه هنگامی که روی آن ماوس حرکت می کند را نشان می دهد.
<html>
<head>
<style>
div {
padding: 1rem;
}
button {
background-color: greenyellow; /* رنگ پس زمینه پیش‌فرض */
font-size: large;
}
button:hover {
background-color: gold; /* رنگ پس زمینه هنگام hover */
}
</style>
</head>
<body>
<h3>Hover example - button</h3>
<button>Hover me!!!</button>
</div>
</body>
</html>وقتی کاربر ماوس را روی دکمه می‌برد، پس‌زمینه دکمه از رنگ پیش‌فرض به رنگ دیگری تغییر می‌کند. این تغییر به کاربر اطلاع می‌دهد که دکمه قابلیت کلیک دارد.
With Border Effect
این کد HTML و CSS یک مثال از تغییر حاشیه (border) یک لینک هنگامی که روی آن ماوس حرکت می‌کند را نشان می‌دهد.
<html>
<head>
<style>
.link {
color: blue; /* رنگ متن پیش‌فرض */
text-transform: uppercase; /* تبدیل متن به حالت بزرگنویسی */
padding: 20px; /* فاصله داخلی */
border: 4px solid blue; /* حاشیه با ضخامت و رنگ پیش‌فرض */
border-radius: 10px; /* شکل گرد کردن گوشه‌ها */
display: inline-block; /* نمایش به صورت بلوک‌های عنصر در یک خط */
}
.link:hover {
color: #494949; /* رنگ متن هنگام hover */
border-radius: 45px; /* شکل گرد کردن گوشه‌ها هنگام hover */
border-color: #494949; /* رنگ حاشیه هنگام hover */
}
</style>
</head>
<body>
<h3>Hover effect on border of the link</h3>
<div class="button"><a class="link" href="#">Check my borders on hover</a></div>
</body>
</html>هنگامی که کاربر ماوس را روی لینک می‌برد، حاشیه لینک از حالت پیش‌فرض به حالت دیگری تغییر می‌کند و این تغییر به کاربر اطلاع می‌دهد که لینک قابل کلیک است.
With box-shadow
این کد HTML و CSS یک مثال از افزودن سایه‌بافت به یک لینک هنگامی که روی آن ماوس حرکت می‌کند را نشان می‌دهد.
<html>
<head>
<style>
a {
font-size: 2rem; /* اندازه فونت */
color: #071402; /* رنگ متن پیش‌فرض */
margin: 0 .25rem; /* حاشیه */
padding: 0 .25rem; /* فاصله داخلی */
transition: color .3s ease-in-out, box-shadow .3s ease-in-out; /* انیمیشن تغییر رنگ و سایه */
}
a:hover {
box-shadow: inset 100px 0 0 100px #9ce2cc; /* افزودن سایه‌بافت هنگام hover */
color: rgb(240, 32, 32); /* رنگ متن هنگام hover */
}
</style>
</head>
<body>
<div>
<a href="#">Hover over me!!</a>
</div>
</body>
</html>هنگامی که کاربر ماوس را روی لینک می‌برد، یک سایه‌بافت به لینک افزوده می‌شود و رنگ متن نیز تغییر می‌کند. این تغییرات به طور پیوسته و با انیمیشن اعمال می‌شوند که تجربه کاربری را بهبود می‌بخشد.
With Background Effect
این کد HTML و CSS یک مثال از رشد پس‌زمینه روی یک لینک هنگامی که روی آن ماوس حرکت می‌کند را نشان می‌دهد.
<html>
<head>
<style>
a {
text-decoration-line: underline; /* خط زیرکشیده */
color: #18272F; /* رنگ متن پیش‌فرض */
font-size: 2rem; /* اندازه فونت */
position: relative; /* موقعیت نسبی */
}
a::before {
content: ''; /* محتوا */
background-color: rgba(118, 213, 83, 0.75); /* رنگ پس‌زمینه با استفاده از rgba */
font-size: 2rem; /* اندازه فونت */
position: absolute; /* موقعیت مطلق */
left: 0; /* فاصله از چپ */
bottom: 3px; /* فاصله از پایین */
width: 100%; /* عرض */
height: 10px; /* ارتفاع */
z-index: -1; /* نمایه‌ی z */
transition: all .5s ease-in-out; /* انیمیشن تغییرات */
}
a:hover::before {
bottom: 0; /* فاصله از پایین */
height: 100%; /* ارتفاع */
}
</style>
</head>
<body>
<div>
<a href="#">Hover over me!!</a>
</div>
</body>
</html>هنگامی که کاربر ماوس را روی لینک می‌برد، پس‌زمینه لینک به صورت پیوسته رشد می‌کند، که تجربه کاربری را بهبود می‌بخشد.
Rainbow Color Effect
این کد HTML و CSS یک مثال از اعمال اثر رنگ رنگین‌کمانی به زیرخط لینک هنگامی که روی آن ماوس حرکت می‌کند را نشان می‌دهد.
<html>
<head>
<style>
a {
color: black; /* رنگ متن */
text-decoration: none; /* عدم زیرخط */
}
a {
background:
linear-gradient(
to right,
rgb(179, 232, 168),
rgb(185, 162, 215)
),
linear-gradient(
to right,
rgba(255, 0, 0, 1),
rgba(255, 0, 180, 1),
rgba(0, 200, 50, 1)
); /* اعمال گرادیانت */
background-size: 100% 5px, 0 5px; /* اندازه پس‌زمینه */
background-position: 100% 100%, 0 100%; /* موقعیت پس‌زمینه */
background-repeat: no-repeat; /* تکرار پس‌زمینه */
transition: background-size 700ms; /* انیمیشن تغییرات */
}
a:hover {
background-size: 0 5px, 100% 5px; /* اندازه پس‌زمینه هنگام هاور */
}
body {
display: grid; /* نمایش به صورت گرید */
font-family: Verdana, Geneva, Tahoma, sans-serif; /* فونت متن */
font-size: 2rem; /* اندازه فونت */
height: 100vh; /* ارتفاع */
}
</style>
</head>
<body>
<div>
<a href="#">Hover over me!!</a>
</div>
</body>
</html>هنگامی که کاربر ماوس را روی لینک می‌برد، زیرخط لینک به صورت یک افکت رنگین‌کمانی تغییر می‌کند، که تجربه کاربری را بهبود می‌بخشد.
Shadow Effect
این کد HTML و CSS یک مثال از اعمال اثر سایه به یک دکمه هنگام هاور را نشان می‌دهد.
<html>
<head>
<style>
body {
width: 100%;
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
}
.glow {
padding: 10px;
width: 250px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 20px;
}
.glow:before {
content: '';
background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -4px;
left:-4px;
background-size: 400%;
z-index: -1;
filter: blur(15px);
width: calc(100% + 6px);
height: calc(100% + 6px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow:active {
color: rgb(246, 235, 235)
}
.glow:active:after {
background: transparent;
}
.glow:hover:before {
opacity: 1;
}
.glow:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
</style>
</head>
<body>
<button class="glow" type="button">HOVER OVER & CLICK!</button>
</body>
</html>در این مثال، هنگامی که کاربر ماوس را روی دکمه حرکت می‌دهد، یک اثر سایه با رنگ رنگین‌کمانی بر روی دکمه ظاهر می‌شود. این اثر با استفاده از ویژگی :hover به دکمه اعمال می‌شود و تجربه کاربری را بهبود می‌بخشد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام