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 به پایین فقط برای لینک قابل استفاده است که البته این روزها این مرورگرها منسوخ شده به حساب می آیند.
ممنونم عالی بود
ممنون از پست خوبتون .
سلام.و قت بخیر. اینا رو چطور باید در سایت قرار داد؟ اگر اموزشش رو دارید متشکر میشم لینکش رو به من معرفی کنید. من نمیدونم با این کدها باید چیکار کنم :(
ببین تو باید این کدها رو در یک فایل notepad بنویسی و اون فایلو با پسوند htm. ذخیره کنی تا اون فایل به صورت یک مرورگر وب (ترجیحا کروم) دربیاد و کدهایی که می نویسی رو به صورت صفحات وب بهت نشون بده. توی notepad قوانین کدنویسی html باید خوب رعایت شه مثلا کدهای css رو در تگ و در قسمت بنویس و کدهایی که می خوای در صفحات وب نمایش داده بشن باید در قسمت باشن.
سلام، سوالی داشتم خدمتتان
من درcss
a:link که می نویسم و رنگش را مشخص می کنم رنگ اعمال نمی شود و از تنظیمات پیش فرص فایرفاکس استفاده می کند و آن رنگها را اعمال می کند چکار کنم که آن تغییرات css اعمال شوند
من الان جور دیگه ای اعمال کردم و فهمیدم که برای من کروم مشکل ساز بوده و با فایرفاکس مشکلم حل شد.
سلام من ميخواستم يك دكمه اى بسازم كه با رفتن موس بر روى ان دكمه هاى پايينى ان دكمه مثلا پنج پيكسل پايين بيايند ممنون اگه ميشه كد سورسشو بدين ممنون
a:hover{
color: aqua;
font-size: 20px;
}
این کد رو بزن
زمانی که موس رو اون متن بره به اندازه 20 پیکسل به سمت جلو میاد
با سلام، من با نوشتن a:hover رو نوشتم و همینطور a:active اما متاسفانه نمیدونم که چرا خود اصل کلمات رو شناسایی نمیکنه و رنگشون عوض نمیشه و وقتی هم که سیو میزنم چیزی تغییر، هرگونه تغییر دیگه اعمال میشه و ارتباط html, css مشکلی نداره ممنون میشم بگید مشکل از چی میتونه باشه.
با سلام، من هم متاسفانه مشکل شمارو داشتم تونستیدراهی پیدا کنید؟؟؟؟
سلام من میخاستم در یک صحفه چنتا مطلب بزارم و واسه همگی ادامه مطالب بزنم که با کلیک رو این کلمه تو همون صفه ادامه مطلب بیاد باید چیکا کنم؟
سلام
از خاصیت show & hide جاوا استفاده کنید
دایو رو اول مخفی کنید
Display:none;
بعد با جاوا اسکریپت نمایان کنید….
Very good
با عرض سلام و خسته نباشید ببخشید یه سوال داشتم ممنون میشم اگر راحنماییم کنید، من دارم یه سایت مینویسم که برای یک قسمتیش از خاصیت hover برای زیرمنو یک عنصر استفاده کردم و در کمی پایین تر اون عکسی با فرمت png جای گذاری کردم در وسط صفحه وقتی که اون زیرمنو باز میشه میره زیر اون عکس اما اصولا باید بیاد روی عکس که بشه روی زیرمنوها کلیک کرد دیگه، ممنون میشم اگر راهنمایی کنید این مشکل من حل بشه.
سلام، مشکل از ویژگی position و نداشتن یا غلط بودن z-index هستش.
سلام سایت شما تنها سایت تخصصی css در ارائه دمتون گرم.
تشکر از آموزش
سلام ممنون از مطلب خوبتون خیل کمکم کرد
سلام
من یه عکس دارم از نمونه کارهام که طول زیادی داره و داخل کادری مربعی قرارداده میشه و زمانی که هاور میشه عکس از بالا نمایش بده حرکت کنه به سمت پایین و تمام عکس رو نمایش بده چه کد css نیازه
لینک نمونه سایت برای تو جیه بیشتر
https://webone.co/fa/%D9%84%DB%8C%D8%B3%D8%AA-%D9%86%D9%85%D9%88%D9%86%D9%87-%DA%A9%D8%A7%D8%B1%D9%87%D8%A7/%D8%B5%D9%81%D8%AD%D9%87/1/%D8%AA%D8%B9%D8%AF%D8%A7%D8%AF-%D8%AF%D8%B1-%D8%B5%D9%81%D8%AD%D9%87/50
سلام
من یه عکس دارم از نمونه کارهام که طول زیادی داره و داخل کادری مربعی قرارداده میشه و زمانی که هاور میشه عکس از بالا نمایش بده حرکت کنه به سمت پایین و تمام عکس رو نمایش بده چه کد css نیازه
سلام ببخشید چطور هم زمان دو تا المنت رو hover کنیم؟