CSS a:hover و IE

ha_60 · Jan 26, 2008

سلام
این IE هم منو دیوونه کرد چرا هیچی پشتیبانی نمیکنه
اینو ببینید

HTML:

a:hover img{ border:3px solid #000066}

یه تگ a داریم که یه تک img توش هست می خواستم موس که روش می ره عکس ها رو جابجا کنم توی ff به راحتی این کار می شه ولی IE فقط آدم رو نگاه می کنه
مشکل هم اینه که به نظر می یاد IE بعد از خصوصیت hover دیگه هیچ کلاس یا تگی رو قبول نمی کنه

کل کار اینه که قرار وقتی با موس روی یه عکس می ری یه عکس بزرگتر به جاش نمایش داده بشه البته با CSS نه جاوا اسکریپت که با همین خصوصیت hover توی FF می شه display:none کرد و یا برعکس اما IE نمی فهمه
به نظر شما چی کار می شه کرد؟

echessdesign · Jan 26, 2008

درود بر شما
این نمونه کد را مشاهده فرمایید:

HTML:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a img {
	width:100px; height:100px; border:3px solid red;
}
a:hover img {
	border:3px solid yellow;
}
</style>
</head>

<body>

<a href=""><img src="1.gif" alt="" /></a>

</body>

</html>

ha_60 · Jan 27, 2008

دقیقا منظور منم همین بود ولی تو Ie6 کار نمی کنه
شما با چی امتحانش کردی نکنه Ie من خراب؟

NabiKAZ · Jan 27, 2008

سلام هادی جان ،

برای حل این مشکل اولین کاری که باید بکنی اینه که کد css ت که hover داره رو اینجوری تغییر بدی:

HTML:

a img:hover {
    border:3px solid yellow;
}

نتیجه همونه و شاید اینطور منطقی تر هم باشه.

حالا همین کد هم در ie6 جواب نمیده به دلیل اینکه در ie6 خاصیت hover تنها برای المان a مفهوم داره(برخلاف استانداردها) و برای اینکه hover برای سایر المان ها از جمله Img کار کنه باید از css hack استفاده کنی.

فایل معروفی به اسم csshover2.htc هست که میتونی از [اینجا] دون لودش کنی.
این فایل رو در کنار فایل html قرار بده و این دستور رو در css اضافه کن:

HTML:

body {
    behavior:url('csshover2.htc');
}

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

موفق باشی
نبی

ha_60 · Jan 27, 2008

سلام
و ممنون دیدم کد ها رو تقریبا با اعمال شاقه و جاوا اسکریپت ور داشته کلاس رو عوض کرده من فعلا یه کلکی سوار کردم با همون hover تگ a بک گراند رو عوض کردم مشکل حل شد (البته حل که نه ولی یه کارایی کردم)
ممنون اگه راه دیگه به ذهنتون رسید ممنون می شم

NabiKAZ · Jan 28, 2008

ha_60 گفت:
سلام
و ممنون دیدم کد ها رو تقریبا با اعمال شاقه و جاوا اسکریپت ور داشته کلاس رو عوض کرده من فعلا یه کلکی سوار کردم با همون hover تگ a بک گراند رو عوض کردم مشکل حل شد (البته حل که نه ولی یه کارایی کردم)
ممنون اگه راه دیگه به ذهنتون رسید ممنون می شم

در ie6 ، متد hover فقط برای تگ a عمل میکنه و هیچ راه دیگه ای نداره !

البته اون چیزی هم که خودت در موردش صحبت کردی به هر حال یه روشه، اینکه عکس رو در زمینه بزاری و تگ a رو بصورت block تعریف کنی و طول و عرض به اندازه عکس بدی و برای حاشیه هم یه padding بدی .... در واقع از تگ a به نفع خودت استفاده کنی ;-)
که خودت هم منظورت همین بود.

اما اگر منظورت یه چیزی مثل img:hover هست ، راهش همونیه که گفتم ، نگرد نیست گشتیم نبود ;-)

خوشی باشی