表样式（奇数和偶数的列颜色，tr：悬停覆盖）

时间：2014-02-12 19:57:46

标签： html css html-table css-selectors styling

我有一张桌子，我希望这些列具有交替的背景颜色。但是，我想要它，以便当我将鼠标悬停在行上时，整行中每个单元格的背景颜色将变为另一种颜色。我认为这很简单，使用nth-child属性和悬停伪类，但我无法弄清楚任何帮助将不胜感激。

下面是我的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>&ndash;</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>&ndash;</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>&ndash;</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>&ndash;</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>&ndash;</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>&ndash;</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;
}

2 个答案:

答案 0 :(得分：2)

问题是你的最后一行。它说，

  1. 在tr odd的{​​{1}}上，td执行此操作background-color。
  2. 此外，即使td上也是如此 - ＆gt;此规则中涉及无悬停， 之前的偶数规则覆盖

    3. 逗号分隔两个规则，您需要将tr:hover >添加到td:nth-child(even)

    但是既然我们正在讨论odd AND even td，那么将它们分开是没有意义的

    tr:hover td {
    background-color:#1A1C1E;
}

    应该可以正常工作

    Here's a jsfiddle您的问题（为了清晰起见，我将悬停背景颜色更改为绿色）

答案 1 :(得分：1)

你的css代码：

tr:hover > td:nth-child(odd), td:nth-child(even)

当你在css声明中放入逗号时，它会在同一行中添加一个新声明。这个css代码说tr:hover > td:nth-child(odd)应该有背景颜色，以及每个td：nth-​​child（偶数）。

将代码更改为：

tr:hover > td:nth-child(odd), tr:hover > td:nth-child(even)
相关问题
最新问题