اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • آموزش ها
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • آموزش ها
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › شبه کلاس › شبه کلاس hover: در CSS

شبه کلاس hover: در CSS

:hover CSS Pseudo-class

عناصر مرتبط:
:active  :visited  :link  :focus  :checked

شبه کلاس 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 پشتیبانی می کنند.

پست قبلی

شبه کلاس fullscreen: در CSS

پست بعدی

شبه کلاس in-range: در CSS

پست بعدی
css-in-range-pseudo-class

شبه کلاس in-range: در CSS

دیدگاه ها 2

  1. فرشاد می‌گوید:
    2 ماه قبل

    درود بر مهندسین عزیز، سوالی داشتم خدمتتون ممنون میشم راهنمایی بفرمایید
    چطور در html باید اولویت مشخص کرد؟ در کد
    https://codepen.io/Fw9/pen/RwoogKL
    زمانی که موس روی عدد 1 هاور میشه عدد 3 استایل داده میشه ،
    (#one:hover ~ #three) رو استفاده کردم
    ولی زمانی که برعکس ( #three:hover ~ #one) نوشته میشه هاور عمل نمیکنه، تنها در یک صورت کار میکنه و اون هم زمانی که خط سومی که در html بکار رفته در خط اول باشه ، یجورایی اولویت خط اوله
    پیشاپیش سپاسگذارم

    پاسخ
    • سهیل اصلی فرد می‌گوید:
      2 ماه قبل

      با سلام و وقت بخیر خدمت شما
      همونطور که خودتون هم اشاره کردید، این شبه‌ کلاس همه‌ی عناصر هم خانواده رو هدف نمی‌گیره. بلکه تنها عناصر هم‌خانواده‌ای که بعد از عنصر مورد نظر ما قرار گرفتند رو هدف قرار میده. در این لینک زیر میتونید نحوه عملکرد این شبه کلاس رو ببینید:
      https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_gen_sibling

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • آموزش ها
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن