:hover CSS Pseudo-class
شبه کلاس hover:
در CSS، زمانی فعال می شود که کاربر ماوس را روی عنصر مورد نظر ببرد.
hover:
یک شبه کلاس داینامیک (پویا) است و زمانی فعال می شود که کاربر با ماوس روی عنصر مورد نظر اشاره کند. این شبه کلاس معمولا بدین منظور مورد استفاده قرار می گیرد تا با بازخورد تصویری به کاربر نشان دهد که او بر روی عنصر مورد نظر اشاره کرده است. همچنین این شبه کلاس برای نشان دادن محتوای ثانویه مانند باز شدن منو ها و تب ها کاربرد فراوان دارد.
استایل هایی که توسط شبه کلاس hover:
به لینک اختصاص میابند توسط شبه کلاس active:
نادیده گرفته می شوند. برای استایل دهی لینک ها به شیوه درست باید به ترتیب زیر استایل دهی کرد:
LVHA -> :link – :visited – :hover – :active
css
a:link { /* استایل دهی به لینک*/ } a:visited { /* استایل دهی به لینک های دیده شده */ } a:hover { /* استایل دهی به هاور */ } a:active { /* استایل دهی به حالت فعال لینک */ }
نکته: در دستگاه های لمسی این امکان وجود دارد که سودو کلاس hover:
بدرستی کار نکند. بسته به نوع مرورگر، سودو کلاس hover:
می تواند اصلا عمل نکند، یا چند لحظه بعد از تماس عمل کند و یا تا لحظه تماس بعدی با صفحه نمایش بر روی عنصر عمل کند.
به همین خاطر بهتر است توسعه دهندگان و طراحان وب این نکته را در نظر داشته باشند که برای محتوای نوشتاری بطور محدود از این شبه کلاس استفاده کنند و یا اصلا آنرا بکار نگیرند تا تعامل کاربر با وبسایت دچار مشکل نشود.
در مثال ساده زیر عملکرد شبه کلاس hover:
را مشاهده میکنیم:
html
<a href="#">Try hovering over this link.</a>
css
body {direction: rtl; font-family:tahoma} a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; }
مشاهده و ویرایش کد در حالت تمام صفحه
شبه کلاس hover:
به طور وسیع توسط طراحان و توسعه دهندگان وب مورد استفاده قرار می گیرد. این امر بدلیل کاربردهای مختلفیست که این شبه کلاس می تواند داشته باشد. از تعامل با کاربر برای درک بهتر او از کار با قسمتهای مختلف وبسایت گرفته تا افکت های گرافیکی و زیبایی بصری همگی می توانند دلیلی برای استفاده از این شبه کلاس پر کاربرد باشند.
در مثال دیگری نحوه عملکرد شبه کلاس hover:
را در ساختار منو میبینیم:
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این سودو کلاس در CSS پشتیبانی می کنند.
درود بر مهندسین عزیز، سوالی داشتم خدمتتون ممنون میشم راهنمایی بفرمایید
چطور در html باید اولویت مشخص کرد؟ در کد
https://codepen.io/Fw9/pen/RwoogKL
زمانی که موس روی عدد 1 هاور میشه عدد 3 استایل داده میشه ،
(#one:hover ~ #three) رو استفاده کردم
ولی زمانی که برعکس ( #three:hover ~ #one) نوشته میشه هاور عمل نمیکنه، تنها در یک صورت کار میکنه و اون هم زمانی که خط سومی که در html بکار رفته در خط اول باشه ، یجورایی اولویت خط اوله
پیشاپیش سپاسگذارم
با سلام و وقت بخیر خدمت شما
همونطور که خودتون هم اشاره کردید، این شبه کلاس همهی عناصر هم خانواده رو هدف نمیگیره. بلکه تنها عناصر همخانوادهای که بعد از عنصر مورد نظر ما قرار گرفتند رو هدف قرار میده. در این لینک زیر میتونید نحوه عملکرد این شبه کلاس رو ببینید:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_gen_sibling