Whatever:Hover

سلام
حتما برای شما هم تا به حال پیش اومده که بخواید برای بخشهایی از سایتتون و یا سایتی که طراحی میکنید افکتی بزارید و زیبا تر و کاربرپسندترش کنید …
و اصولا اگر به حجم صفحه و سرعت لود هم اهمیت بدید استفاده از CSS میتونه گزینه مناسبی باشه نسبت به فلش یا بعضی برنامه های جاوا و …
تویه این مطلب میخوام براتون درباره افکت Hover صحبت کنم ..
نحوه کاربردش و امکاناتش و محدودیتها و راه حلهاش !
حتما اسم Hover رو برای رنگ متن لینکها زمانی که موس رویه اونها قرار میگیره رو شنیدید ( در واقع OnMouseOver Event هست )
ولی امروز برای طراحی های حرفه ای تر کاربرد Hover فقط به لینک محدود نمیشه .
در واقع شما میتونید برای هر عنصری از صفحتون استفاده کنید ..
به عنوان مثال برای Paragraph یا یک Box به صورت DIV یا …
و البته طبق معمول Internet Explorer با این افکت مشکل داره و در حقیقت اصلا نمایش نمیده .
راه حلی برای IE موجوده که بعدا توضیح میدم ..
برای درک ساده تر براتون مثالی میزنم :
فرض کنید شما میخواید یک منوی خیلی ساده برای یک سایت طراحی کنید…
شما تصمیم میگیرید با یک لیست غیر ترتیبی (Unordered List یا UL ) کارتون رو انجام بدید و میخواید که افکتی براش داشته باشید …
خیلی ساده میتونید با تعریف یک کلاس و حالت Hover اون کلاس این کارو رو انجام بدید …
نمونه کد CSS :

.menu ul li {
background: #CCCCCC;
height: 18px;
margin: 3px 0px 2px;
padding: 0px 5px 0px 5px;
border-right: 7px solid #666666;
font: normal 12px Georgia, "Times New Roman", Times, serif;
}

و برای قسمت Hover :

.menu ul li:hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-left: 7px;
}

و داخل صفحتون کد HTML به این شکل :

…
<ul>Menu 1
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
…

قرار میگیره !
نمونه این منوها رو تویه این صفحه میتونید ببینید . هم افقی هم عمودی .
به همین شکل شما میتونید این افکت رو برای جدولها ، متنها و … استفاده کنید …
و اما بخش مهمتر موضوع IE و سازگاری با اون هست …
معمولا اگر بخواید همچین افکتی رو برای IE داشته باشیم باید از Event های onmouseover و onmouseout و .. استفاده کنیم که در واقع برنامه نویسی جاوا هست …
ولی مشکل اینجاست برای صفحات بزرگ و بخشهای مختلف استفاده زیاد از این موارد برای افکتمون خیلی جالب نیست و علاوه بر بالا بردن حجم ، سرعت Rendering صفحه هم پایین میاره و کدهامونو شلوغ میکنه !
حالا راه حل اینجاست !
خیلی ساده میشه با استفاده از یک فایل جاوا اسکریپت خارجی و CSS این مشکل رو حل کرد ..
و در واقع این فایل هم دقیقا از همون Event هایی که گفتم استفاده میکنه ولی احتیاجی به تکرار اونها برای هر مورد نیست !
و تنها نکتش برای استفاده اینه که شما تویه فایل CSS تون دقیقا اون خواص مورد نظرتون رو که میخواید در حالت Hover داشته باشید رو به صورت کلاسی به همون نام تکرار میکنید !
برای مثال برای منویی که بالا گفتم میشه :

.menu ul li.hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-right: 7px;
}

و به همین صورت .
که اون فایل جاوا میاد و از تویه CSS تون این کلاسهایی که با .hover ختم میشه را به عنوان Event ه onmouseover قرار میده و مشکل حل میشه !

دریافت فایلهای نمونه و فایل جاوا
امیدوارم به دردتون بخوره …
موفق و پیروز باشید…
علی