به طور روزانه ما به هر دلیلی از سایت های زیادی بازدید می کنیم هر کدام از این وب سایت ها طراحی های خاص و زیبای مخصوص خود را دارند. طراحی و ساختن ظاهر مناسب برای صفحات وب و وب سایت ها بسیار امری مهم و حیاتی است و بهتر است تا طراحی و دیزاین سایت با موضوع سایت مرتبط باشد. رعایت کردن نکات مهم در طراحی و دیزاین ظاهری سایت یکی از مهم ترین موارد برای جذب مخاطب است. حتما شما در بیشتر صفحات وب و وبسایت ها دیده اید که با بردن نشانگر موس بر روی دکمه ها یا لینک ها حالت و یا ظاهر آن دکمه تغییر میکند و کاربر ترغیب می شود تا بر روی آن کلیک کند. امروز کارشناسان وب سایت آموزش برنامه نویسی صعود قصد دارند تا شما را با شبه کلاس Hover هاور و کاربرد آن در زبان CSS آشنا کنند پس اگر شما مایل به یادگیری شبه کلاس Hover هستید در این مطلب ما را همراهی کنید. برای آشنایی کاملتر با زبان HTML و CSS پیشنهاد میکنیم تا مقالات، CSS چیست؟ آشنایی با زبان سی اس اس و HTML چیست؟ از سیر تا پیاز HTML را مطالعه کنید
Hover چیست؟ آموزش هاور در CSS
Hover: یک نمونه از شبه کلاس‌ها است که برای استایل دادن به عنصر ها در صفحات وب استفاده می‌شود.شبه کلاس Hover برای انتخاب عنصر هایی که کاربرها نشانگر یا ماوس خود را روی آن می‌برند به کار می رود. می توان از آن در همه عناصر استفاده کرد و فقط برای استفاده در لینک ها نیست. زمانی که Hover برای استایل دادن به پیوندها استفاده می شود. اغلب با انتخابگرهای link، visited و active جفت می شود که به ترتیب به پیوندهای بازدید نشده، بازدید شده و فعال استایل می دهند. شبه کلاس Hover باید بعد از Link و visited بیاید در غیر این صورت، استایل های موجود در قانون Hover روی عنصر انتخاب شده اعمال نمی شوند. مانند قطعه کد زیر:
a:hover {
/* CSS declarations */
}
انتخابگر Hover تنها زمانی که یک عنصر به حالت شناور وارد می شود، سبک های ارائه شده در استایل ها را اعمال می کند. این عمل معمولا زمانی اتفاق می افتد که کاربر نشانگر ماوس خود را روی عنصر قرار می دهد.
button {
color: white;
background-color: green;
}
button:hover {
background-color: white;
border: 2px solid green;
color: green;
}
در مثال بالا، استایل معمولی دکمه، متن سفید بر روی یک دکمه سبز رنگ است. وقتی کاربر نشانگر ماوس را روی دکمه قرار می دهد، قسمت مربوط به Hover فعال می شود و سبک دکمه تغییر می کند. توجه داشته باشید که Hover می‌تواند در صفحه‌نمایش‌های لمسی مشکل‌ساز باشد. سخت‌افزارهای مختلف و پیاده‌سازی‌های مرورگر تلفن همراه می‌توانند باعث شوند که شبه کلاس Hover در برخی موارد فعال و در موارد دیگر غیر فعال باشد.بهتر است قبل از هرچیزی حتما عناصر Hover را در تعداد زیادی از مرورگرها و دستگاه های مختلف تلفن همراه به طور کامل آزمایش کنید.
-css-چیست؟-آموزش-هاور-در-hover.jpg)
چه مرورگر هایی از شبه کلاس Hover پشتیبانی می کنند؟
|
مرورگر |
Chrome |
Firefox |
Opera |
Safari |
Edge |
|
امکان پشتیبانی |
دارد |
دارد |
دارد |
دارد |
دارد |
مثال: در قطعه کد زیر یک لینک با استفاده از tag <Html>ایجاد کردیم. و با استفاده از استایل و CSS به آن تصویر پس زمینه یا بک گراند دادیم و بعد با استفاده از شبه کلاس Hover و CSS این قابلیت را به لینک دادیم که بعد از بردن نشانگر ماوس بر روی لینک رنگ پس زمینه آن به رنگ زرد تغییر کند.
<html>
<head>
<title>soud.ir</title>
<style>
a {
background-color: powderblue;
transition: background-color .5s;
}
a:hover {
background-color: gold;
}
</style>
</head>
<body>
<a href="#">وب سایت آموزشی صعود</a>
</body>
</html>
.jpg)
در این مطلب کارشناسان بخش آموزش وب سایت صعود با ذکر چند مثال از شبه کلاس Hover و تعریف این شبه کلاس تمامی نکات مهم که شما برای شروع و یادگیری آن نیاز دارید در اختیارتان قرار دادند. همچنین در مقالات قبلی به طور کلی در رابطه با زبان CSS و زبان HTML توضیح دادیم، در رابطه با این موضوع پیشنهاد کارشناسان ما این است که مقاله ی نحوه استفاده از CSS در HTML را مطالعه کنید . همینطور شما می توانید تمامی سوالات خود در رابطه با شبه کلاس Hover را از قسمت نظرات با کارشناسان ما در میان بگذارید. در صورت تمایل می توانید صعود را در شبکه های اجتماعی اینستاگرام و تلگرام دنبال کنید.
درباره مطلب دیدگاهی بنویسید