no-img
ایستگاه یادگیری

آموزش خاصیت Hover در css


ایستگاه یادگیری
مطالب ویژه‌ی سایت
اطلاعیه های سایت :

ادامه مطلب

ZIP
آموزش خاصیت Hover در css
zip
اردیبهشت ۶, ۱۳۹۵

آموزش خاصیت Hover در css


 

سلام دارم خدمت همگی عزیزان و کاربران سایت ایستگاه یادگیری!?

امروز آموزشی مبتنی بر خاصیت Hover در CSS برای شما آماده کردیم که با آموختن این آموزش میتونید در طراحی هاتون ازش استفاده کنید.در واقع این خاصیت به شما کمک میکنه که در هنگام وارد شدن ماوس بر روی فضای مورد نظر که میتونه یک باکس باشه یا تصویر یا هر چیزی، استایل متفاوتی رو بهش بده.برای مثال در هنگام ورود ماوس به داخل محیط یک تصویر، اون تصویر کمی Blur بشه یا …

با ما با این آموزش همراه باشید…

  • کدام مرورگر ها این خاصیت را پشتیبانی خواهند کرد؟


جدول پشتیبانی مروگر ها از Hover بر اساس نسخه آنان

  • خب بریم سر آموزش!در ابتدا میخوام شما رو با شکل کلی این خاصیت آشنا کنم.برای مثال ما یک تصویر در صفحه وبمون داریم که میخوام با رفتن ماوس بر روی اون، کمی شکلش تغییر کنه.کد زیر رو ببینید :
    (نام کلاس تصویرمون هم img1 هستش و این کد های css مربوط به Hover میباشد)
.img1:hover{ transition:all 0.7s; -webkit-filter: blur(3px); cursor:pointer;
}
  • گفتیم که وقتی ماوس روی تصویرمون رفت، خاصیت Blur عکس رو در مدت ۰٫۷ ثانیه افزایش بده و تا زمانی که ماوس از محوطه عکس بیرون نرفته این مقدار ثابت بمونه.

پس اینطور شد که شما هر وقت خواستید به شئ مورد نظرتون در هنگام Hover شدن (رفتن ماوس بر روی آن) استایل خاصی بدید، باید کد های استایل جدید رو در میان :

TagName:Hover{
{

قرار بدید.یادتون نره که باز و بسته شدن {    } رو هم دقت کنید!

  • حتما ببینید :

 مثالی از خاصیت Hover در CSS (کلیک کنید)
طراحی توسط ایستگاه یادگیری

موفق و شادمان بمانید.?



موضوعات :
HTML , مباحث تحت وب

درباره نویسنده

مهدی کفشگر

بنده مهدی کفشگر، مدیر سایت ایستگاه یادگیری هستم.از اولش علاقه بسیاری به بازی سازی، برنامه نویسی و وبلاگ نویسی داشتم.خیلی دوست دارم تا پایان عمرم، در این راه روز به روز پیشرفت کنم.

مهدی کفشگر 272 نوشته در ایستگاه یادگیری دارد . مشاهده تمام نوشته های

دیدگاه ها


یک پاسخ به “آموزش خاصیت Hover در css”

پاسخ دهید

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

سایت جدید ایستگاه یادگیری تاسیس شد..! (پشتیبانی از محصولات ادامه دارد)ورود به سایت