td:hover

Mohammadreza · Aug 24, 2007

با سلام
من فايل HTC رو به تقويم زير كه نوشتم متصل كردم
مي خوام وقتي روزهاي تعطيل ميريم رنگ پس زمينه و ... عوض شه
ولي نمي دونم مشكل كجاست كه اين اتفاق نمي افته ...
فايل HTML

کد:

<html>
<head><title>calendar</title>
<link rel="stylesheet" type="text/css" href="cal.css" />
</head>
<body>
<table class="tab">
<caption>Jul 2004</caption>
<tr>
	<th>mo</th>
	<th>tu</th>
	<th>we</th>
	<th>th</th>
	<th>fr</th>
	<th>sa</th>
	<th>su</th>
</tr>
<tr>
	<td class="prw">31</td>
	<td>1</td>
	<td>2</td>
	<td class="day">3
	</td>
	<td>4</td>
	<td>5</td>
	<td class="tat">6
	</td>
</tr>
<tr>
	<td>7</td>
	<td>8</td>
	<td class="day">9
	</td>
	<td>10</td>
	<td>11</td>
	<td>12</td>
	<td class="tat">13
	</td>
</tr>
<tr>
	<td>14</td>
	<td>15</td>
	<td>16</td>
	<td>17</td>
	<td class="day">18
</td>
	<td>19</td>
	<td class="tat">20
	</td>
</tr>
<tr>
	<td>21</td>
	<td>22</td>
	<td>23</td>
	<td>24</td>
	<td>25</td>
	<td>26</td>
	<td class="tat">27
	</td>
</tr>
<tr>
	<td>28</td>
	<td>29</td>
	<td>30</td>
	<td class="nex">1</td>
	<td class="nex">2</td>
	<td class="nex">3</td>
	<td class="nex">4
	</td>
</tr></table>
</body>
</html>

فايل CSS

کد:

/* CSS Document */
body {
	font:bold 10px Arial, Helvetica, sans-serif;
	behavior:url(iehover.htc);
}
.tab {
	background:#999999;
	border-collapse:collapse;
}
.tab caption {
	text-align:left;
	font:bold 10px Arial, Helvetica, sans-serif;
	background:#000000;
	color:#FFFFFF;
}
.tab td {
	border:1px solid #000000;
	font:bold 10px Arial, Helvetica, sans-serif;
	text-align:left;
}
li {
	list-style-type:none;
}
.tab th {
	background:#0099FF;
	color:#000000;
	width:15px;
	font:10px;
}
.tat {
	background:#000099;
	color:#FFFFFF;
}
.tat td:hover {
	background:#00FF99;
	color:#CCCCCC;
}
.day {
	background:#0066CC;
	color:#CCCCCC;
	border:4px solid #000000;
}
.nex {
	background:#FFFFFF;
	color:#CCCCCC;
}
.prw {
	background:#FFFFFF;
	color:#CCCCCC;
}

تشكر

amirabbas_p30magazine · Aug 24, 2007

خوب

1- شما اینو تو چه مرورگری تست کردید (فایل HTC توی IE7 کار نمی کنه)
2- اسم فایل htc شما چیه ؟ اگر اسم فایل شما با اون چیزی که تو برگه سبک نوشتید فرق داشته باشه این فایل کار نمی کنه
3- مطمئنید مسیر فایل htc رو به درستی در برگه سبک نوشتید ؟

Mohammadreza · Aug 24, 2007

1- مرورگر : ie6
2- نام فايل : iehover.htc
3- بله ( مطمئن هستم كه فايل متصل شده چون اون پيغام زرد رنگ كه گفتين فقط توي لوكال مياد ، مياد )

amirabbas_p30magazine · Aug 24, 2007

خوب طبیعتا باید کار کنه. مخصوصا اینکه شما میگی اون نوار زرد بالای مرورگر شما باز میشه. شما صفحت رو به یه هاست مثل پرشین گیگ آپلود کن و تو وب تستش کن. من فکر کنم الان سالمه. تنظیمات امنیتی مرورگرت جلوی اجراش رو روی لوکال میگیره

Mohammadreza · Aug 24, 2007

ببين عزيز مثالي كه در كتاب 101 نكته و ترفند هست درست كار مي كنه پس اشكال از سيستم من فكر كنم نباشه ...
فرق چيزي كه من نوشتم با چيزي كه داخل كتابه يه كد جاوا اسكريپته ...
درضمن من آپلودشم كردم كار نكرد
ببينيد http://sinderella.persiangig.com/calendar

amirabbas_p30magazine · Aug 24, 2007

یه مشکلی به نظر من تو کد نویسی CSS شما هست
شما یه دستوری دارید تو فایل CSS به این شکل

کد:

.tat td:hover, .tat td.calh {
background:#00FF99 none repeat scroll 0%;
color:#CCCCCC;
}

این کد اشتباهه. شما اول اسم کلاس tat. رو آوردی و بعدش td رو آوردی. این یعنی اینکه هر جا کلاس tat. بود، هر td که زیر مجموعش بود رو تحت تاثیر قرار بده در صورتی که در طرح شما کلاس tat. به خود td اختصاص داده شده نه زیر مجموعش. پس باید دستور شما اینطوری باشه

کد:

td:hover.tat   {
	background:#00FF99;
	color:#CCCCCC;
}

من روی لوکال تست کردم درست نشون میده

Mohammadreza · Aug 25, 2007

ممنون از لطف شما
من اين ترتيب قرار گرفتن رو درست متوجه نشدم
اگه براتون امكانپذير بود يه توضيح در مورد اينا بدين تا همه ي مبتديا استفاده كنن
تشكر ...

amirabbas_p30magazine · Aug 27, 2007

ببینید وقتی شما یک دستور رو به این شکل به کار می برید

کد:

.amir td a {
text-decoration: none;
}

این به مرورگر میگه که اول یه عنصر تو صفحه که کلاس amir داره رو پیدا کن. حالا داخل این عنصر ، عنصر td رو پیدا کن، بعد از اون داخل این عنصر یا عناصر td به دنبال تگ a بگرد و خط زیرش رو حذف کن.

ولی وقتی دستور رو به این شکل به کار می برید

کد:

td.amir a {
text-decoration: none;
}

یعنی بگرد یه عنصر td پیدا کن که کلاس amir داشته باشه و داخل این تگ به دنبال a بگرد و زیر خط ها رو حذف کن

تو مورد اول ، اون تگ والد که ما نمی دونیم چیه ، یه کلاس به اسم امیر داره و ما داخل اون تگ به دنبال td ها و در داخل td ها به دنبال a میگردیم.
تو مورد دوم ، تگ والد خودش کلاس amir رو داره ما داخل اون به دنبال a می گردیم

تو کد شما خود تگ td کلاس tat رو داشت در نتیجه باید به شیوه دوم نوشتش ولی شما به شکل حالت اول نوشته بودی