PDA

View Full Version : سوال: رویداد onmouseover و تگ <td>


drhadi_20
جمعه 07 آبان 1389, 02:05 صبح
با سلام

من میخوام وقتی که پوینتر ماوس روی یک td قرار گرفت، رنگ زمینه td یعنی bgcolor تغییر کند ولی از هر روشی که استفاده میکنم جواب نمیده، خصوصیات دیگه رو میشه تغییر داد مانند طول و یا عرض، ولی bgcolor رو هر کار کردم نتونستم تغییر بدم، ممنون میشم اگر کسی میتونه کمک کنه.


با سپاس
emad_67
جمعه 07 آبان 1389, 10:26 صبح
نیازی به onmouseover نیست، از css استفاده کنید:


td:hover
{
background-color: Red;
}
drhadi_20
جمعه 07 آبان 1389, 21:14 عصر
نیازی به onmouseover نیست، از css استفاده کنید:


td:hover
{
background-color: Red;
}


ممنون دوست عزیز، اول بگم که من با css خیلی کم آشنایی دارم ولی با استفاده از این روش فقط رنگ زمینه متن تغییر رنگ پیدا کرد در صورتی که من میخوام کل زمینه td تغییر رنگ پیدا کند که مثلا ممکن است ارتفاع و عرض آن چند برابر متن داخل آن باشد. البته من به این صورت بکار بردم: a:hover چون td:hover عمل نکرد، مطمئن هستید hover برای td هم کار میکند؟


با سپاس
Keramatifar
شنبه 08 آبان 1389, 00:15 صبح
دوست عزیز
بجای background-color فقط color رو ست کن
drhadi_20
شنبه 08 آبان 1389, 02:14 صبح
دوست عزیز
بجای background-color فقط color رو ست کن

راستش دقیقا متوجه منظورتون نشدم! میشه لطفا نمونه کد رو بنویسید؟ در a:hover یا td:hover یا.... فقط color رو ست کنم؟


با سپاس
Keramatifar
شنبه 08 آبان 1389, 11:41 صبح
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sample</title>
<style type="text/css">
table tr td:hover
{
background: Red;

}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1-1</td>
<td>Cell 1-2</td>
</tr>
<tr>
<td>Cell 2-1</td>
<td>Cell 2-2</td>
</tr>
</table>
</body>
<html>
drhadi_20
یک شنبه 09 آبان 1389, 00:23 صبح
نیازی به onmouseover نیست، از css استفاده کنید:


td:hover
{
background-color: Red;
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sample</title>
<style type="text/css">
table tr td:hover
{
background: Red;

}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1-1</td>
<td>Cell 1-2</td>
</tr>
<tr>
<td>Cell 2-1</td>
<td>Cell 2-2</td>
</tr>
</table>
</body>
<html>


یک موردی رو که من دقت نکرده بودم اینه که این روش توی firefox به خوبی کار میکنه ولی توی IE اصلا جواب نمیده!!
Keramatifar
یک شنبه 09 آبان 1389, 11:00 صبح
یک موردی رو که من دقت نکرده بودم اینه که این روش توی firefox به خوبی کار میکنه ولی توی IE اصلا جواب نمیده!!
بله، دلیلش هم اینه که در نسخه های قبل از IE8 کلاس کاذب hover فقط برای المنتهای <a> شناخته میشه.
برای رفع این مشکل باید فایلی که ضمیمه کردم (csshover.htc) رو با استفاده از behavior (دستوری است که فقط در IE شناخته می شود)در المنت body لود کنی تا در IE کلاس کاذب hover برای دیگر المنت ها هم شناسایی بشود.


body{
behavior: url("csshover.htc");
}
drhadi_20
یک شنبه 09 آبان 1389, 21:12 عصر
بله، دلیلش هم اینه که در نسخه های قبل از IE8 کلاس کاذب hover فقط برای المنتهای <a> شناخته میشه.
برای رفع این مشکل باید فایلی که ضمیمه کردم (csshover.htc) رو با استفاده از behavior (دستوری است که فقط در IE شناخته می شود)در المنت body لود کنی تا در IE کلاس کاذب hover برای دیگر المنت ها هم شناسایی بشود.


body{
behavior: url("csshover.htc");
}



اول ممنون که این پست رو مرتب پیگیری میکنید، ولی من با به کار بردن این روش هم نتیجه نگرفتم! فایل csshover.htc رو همون جایی که فایل HTML هست کپی کردم، شاید المنت body رو درست بکار نگرفتم، میشه لطف کنید و در مثال قبلی (که یک فایل کامل html بود) این مورد رو هم اضافه کنید تا مطمئن بشم درست بکار برده باشم؟

با سپاس فراوان
Keramatifar
دوشنبه 10 آبان 1389, 12:59 عصر
در این مثال استایل ها رو در فایل CSS نوشتم.