افکت Hover

حالا می خواهیم افکت Hover را به لیست هدایتیمان اضافه کنیم.

عکس جدیدمان ("img_navsprites_hover.gif") شامل 6 تکه تصویر کوچک است، 3 عکس برای حالت معمولی و 3 عکس دیگر برای موقعی که اشاره گر موس روی آنها قرار بگیرد:

navigation images

بخاطر اینکه 6 عکس مختلف را داخل یک عکس تنها قرار دادیم، زمانی که اشاره گر موس روی تصاویر قرار می گیرد تأخیر بارگذاری وجود نخواهد داشت.

برای اضافه کردن افکت Hover تنها 3 خط کد به مثال قبلی اضافه می کنیم:

مثال (افکت Hover)

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
خودتان امتحان کنید »

توضیح مثال:

  • چونکه آیتم های لیست شامل تگ <a> هستند، ما می توانیم از شبه کلاس hover: استفاده کنیم.
  • برای 3 گزینشگر بالا عکس "img_navsprites_hover.gif" را به عنوان پس زمینه تنظیم می کنیم.
  • باید عکس پس زمینه را "45px" پایین تر مکان دهی کنیم.

آموزش های مرتبط

آموزش CSS-تکه تکه کردن عکس