hover:

hover یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصری که کاربر نشانه گر موس و یا وسیله دیگر را بر روی آن نگه داشته است, استفاده می شود.

از hover برای تعامل بهتر کاربر با عناصر استفاده می شود, به عنوان مثال می توان به کاربر اطمینان داد که عنصری که به آن اشاره می کند واقعا در وضعیت مورد اشاره بودن است. همینطور از این انتخابگر برای نمایش محتواهای مخفی و ثانویه استفاده می شود. به عنوان مثال برای نمایش زیرمنو ها استفاده از hover بسیار کاربردی و معمول است.

استفاده از hover برای دستگاهای لمسی توصیه نمی شود چون با مشکلاتی همراه خواهد بود.

به عنوان مثال کد زیر باعث می شود که هر لینکی در صفحه در وضعیت hover برعکس استایل اولیه اش که پس زمینه سفید و رنگ متن آبی است, شود.


a:link {
  color: skyblue;
  background-color: white;
}

a:hover {
  background-color: skyblue;
  color: white;
}

همانطور که گفته شد انتخابگر hover فقط برای لینک ها استفاده نمی شود بلکه برای تمام عناصر قابل استفاده است. به عنوان نمونه کد زیر یک تصویر را در وضعیت hover یک و نیم برابر اندازه اولیه اش می کند و همینطور opacity آن را کامل می کند.


img {
  opacity: 0.5;
}

img:hover {
  transform: scale(1.5);
  opacity: 1;
}

زمانی که قصد استایل دهی بر روی حالت های مختلف یک لینک از قبیل link , visited , focus , hover , active را دارید باید مراقب ترتیب نوشتن آن ها در CSS باشید.

ترتیب زیر در حالت عمومی ترتیب مناسبی است اما در نهایت, این طرح است که ترتیب را مشخص می کند:


a:link {

}

a:visited {

}

a:focus {
  
}

a:hover {

}

a:active {

}

دموی های زیر به اهمیت کاربرد hover در دنیای وب اشاره می کند:

 

See the Pen :hover by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

See the Pen Menu by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

See the Pen Caption Effect by Mojtaba Seyedi (@seyedi) on CodePen.


 

پشتیبانی مرورگرها

hover: در تمام مرورگرهای اصلی پشتیبانی می شود. در اینترنت اکسپلورر 6 به پایین و اپرا 6 به پایین فقط برای لینک قابل استفاده است که البته این روزها این مرورگرها منسوخ شده به حساب می آیند.