0
我有一張桌子，我希望列具有交替的背景顏色。但是，我需要它，以便當我將鼠標懸停在該行上時，整行中每個單元格的背景顏色將更改爲另一種顏色。我認爲這會很簡單，使用nth-child屬性和懸停僞類，但我不明白任何幫助將不勝感激。表格樣式（奇數和偶數的列顏色，tr：懸停覆蓋）
以下是我的html和CSS。原諒我添加我的整個代碼，但我似乎無法查明相關的確切位置。我還是個初學者。我會添加一張圖片，但是我已經弄得太多了，以至於它不會有幫助。
本網站有我正在嘗試製作的表格的類型。 http://metrarail.com/metra/en/home/maps_schedules/metra_system_map/md-n/schedule.full.html
這是我的HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metra Train Schedule</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Attempt at adding favicon-->
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="header"><img src="img/Header.jpg" /></div>
<div id="content">
<hgroup>
<h1 class="paddedleft">Metra Rails</h1>
<h2 class="paddedleft">District/North Line in Chicago</h2>
</hgroup>
<h3 class="paddedleft"><a href="#inbound">Inbound Schedule</a> |
<a href="#outbound">Outbound Schedule</a></h3>
<p class="paddedleft">
Metra can get you where you need to be, when you need to be there! When riding with metra you are guarenteed that our schedule will be right on time. You will never have to be late again. Just imagine traveling through the beautiful city of chicago lounging on our fine leather benches in pure comfort. Our trains are the cleanest in the world and have been rated five stars for comfortability, ease of access, and timeliness. You will find that riding with Metra Rails has many benefits to it, you can find more of those benefits <a href="http://metrarail.com/content/metra/en/home/utility_landing/riding_metra/riding_metra.html">here.</a>
</p>
<hr>
<div id="inbounds">
<h3>Milwaukee District/North Line (Mayfair to Chicago)</h3><br>
<table id="inbound" cellpadding="0" cellspacing="0">
<caption>Inbound Schedule: Sunday</caption>
<tbody>
<tr>
<th class="stop">Train #</th>
<th>2600</th>
<th>2602</th>
<th>2604</th>
<th>2606</th>
<th>2608</th>
<th>2612</th>
<th>2614</th>
<th>2616</th>
<th>2620</th>
<th>2622</th>
</tr>
<tr>
<th class="stop">AM/PM</th>
<td>AM</td>
<td>AM</td>
<td>AM</td>
<td>AM</td>
<td>AM</td>
<td>PM</td>
<td>PM</td>
<td>PM</td>
<td>PM</td>
<td>PM</td>
</tr>
<tr>
<th class="stop">Mayfair</th>
<td>06:47</td>
<td>07:57</td>
<td>09:57</td>
<td>–</td>
<td>11:57</td>
<td>01:57</td>
<td>03:57</td>
<td>05:57</td>
<td>09:34</td>
<td>11:34</td>
</tr>
<tr>
<th class="stop">Grayland</th>
<td>06:49</td>
<td>07:59</td>
<td>09:59</td>
<td>10:50 c</td>
<td>11:59</td>
<td>01:59</td>
<td>03:59</td>
<td>05:59</td>
<td>09:36</td>
<td>11:36</td>
</tr>
<tr>
<th class="stop">Healy</th>
<td>06:52</td>
<td>08:02</td>
<td>10:02</td>
<td>–</td>
<td>12:02</td>
<td>02:02</td>
<td>04:02</td>
<td>06:02</td>
<td>09:39</td>
<td>11:39</td>
</tr>
<tr>
<th class="stop">Western Avenue</th>
<td>06:57</td>
<td>08:08</td>
<td>10:08</td>
<td>–</td>
<td>12:08</td>
<td>02:08</td>
<td>04:08</td>
<td>06:08</td>
<td>09:43</td>
<td>11:43</td>
</tr>
<tr>
<th class="stop">Union Station</th>
<td>07:12</td>
<td>08:22</td>
<td>10:22</td>
<td>11:10</td>
<td>12:22</td>
<td>02:22</td>
<td>04:22</td>
<td>06:22</td>
<td>09:58</td>
<td>11:58</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div id="outbounds">
<h3>Milwaukee District/North Line (Chicago to Mayfair)</h3><br>
<table id="outbound" cellpadding="0" cellspacing="0">
<caption>Outbound Schedule: Sunday</caption>
<tbody>
<tr>
<th class="stop">Train #</th>
<th>2601</th>
<th>2605</th>
<th>2607</th>
<th>2611</th>
<th>2615</th>
<th>2619</th>
<th>2621</th>
<th>2623</th>
<th>2625</th>
<th>2627</th>
</tr>
<tr>
<th class="stop">AM/PM</th>
<td>AM</td>
<td>AM</td>
<td>PM</td>
<td>PM</td>
<td>PM</td>
<td>PM</td>
<td>PM</td>
<td>PM</td>
<td>PM</td>
<td>AM</td>
</tr>
<tr>
<th class="stop">Union Station</th>
<td>08:35</td>
<td>10:35</td>
<td>12:35</td>
<td>02:35</td>
<td>04:35</td>
<td>05:35</td>
<td>06:35</td>
<td>08:35</td>
<td>10:35</td>
<td>12:25</td>
</tr>
<tr>
<th class="stop">Western Avenue</th>
<td>08:44</td>
<td>10:44</td>
<td>12:44</td>
<td>02:44 c</td>
<td>04:44</td>
<td>–</td>
<td>06:44</td>
<td>08:44</td>
<td>10:44</td>
<td>12:34</td>
</tr>
<tr>
<th class="stop">Healy</th>
<td>08:49</td>
<td>10:49</td>
<td>12:49</td>
<td>02:49 c</td>
<td>04:49</td>
<td>–</td>
<td>06:49</td>
<td>08:49</td>
<td>10:49</td>
<td>12:39</td>
</tr>
<tr>
<th class="stop">Grayland</th>
<td>08:52</td>
<td>10:52</td>
<td>12:52</td>
<td>02:52</td>
<td>04:52</td>
<td>05:48 c</td>
<td>06:52</td>
<td>08:52</td>
<td>10:52</td>
<td>12:42</td>
</tr>
<tr>
<th class="stop">Mayfair</th>
<td>08:54</td>
<td>10:54</td>
<td>12:54</td>
<td>02:54 c</td>
<td>04:54</td>
<td>–</td>
<td>06:54</td>
<td>08:54</td>
<td>10:54</td>
<td>12:44</td>
</tr>
</tbody>
</table>
</div>
<div class="other">
<h2>To see schedules for other days click <a href="http://metrarail.com/metra/en/home/maps_schedules/metra_system_map/md-n/schedule.full.html">here.</a></h2></div>
</div>
</body>
</html>
這是我的CSS
@charset "utf-8";
/* CSS Document */
body {
background:url(img/background_texture.jpg) no-repeat center center fixed;
background-size: cover;
color: white;
}
h1, h2, h3 {
font-family:Helvetica, Arial, Tahoma, Geneva, sans-serif
}
h1 {
margin: 0px;
}
#header {
width: 1020px;
padding: 0px;
margin: 0 auto;
}
#header img {
vertical-align: bottom;
}
#content {
background-image:url(img/ContentBox.png);
background-repeat: no-repeat;
background-position:center;
padding: 0;
width: 1020px;
margin: 0 auto;
}
table, td, th {
border: 1px solid white;
border-collapse: collapse;
padding: 4px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
}
th {
font-size: 1.25em;
font-weight: bolder;
}
td {
font-weight: bold;
}
caption {
font-size: 1.5em;
font-weight: bold;
}
.stop {
text-align: right;
}
a:link {
color: #d39a11;
}
a:visited {
color:#7E6201;
}
a:hover {
color:#FB992D
}
a:active {
color: d39a11;
}
#inbounds, #outbounds {
text-align: center;
width: 100%;
}
#inbound, #outbound {
margin: auto;
}
.other {
text-align: center;
}
#inbounds h3, #outbounds h3 {
font-size: 1.5em;
margin: 0;
}
p {
font-size: 1.15em;
padding-right: 5px;
}
.paddedleft {
padding-left: 5px;
}
hr { display: block;
height: 2px;
border: 0;
border-top: 1px solid #0054a4;
margin: 1em 0;
padding: 0;
}
td:nth-child(odd) {
background-color: #363c40;
}
td:nth-child(even) {
background-color:#d39a11;
}
tr:hover > td:nth-child(odd), td:nth-child(even) {
background-color:#1A1C1E;
}
作爲張貼的建議，把代碼放在jsfiddle.net上。它使每個人都可以更容易地測試你的代碼。我在這裏爲你製作了一個：http://jsfiddle.net/FfjET/2/ – steinmas
謝謝你的提示。我會從現在開始做，看起來會讓事情變得更容易。 :) – DiscipleDavid