使用 CSS 悬停偶数元素的子元素答案

【问题标题】：Hovering child element of an even element using CSS使用 CSS 悬停偶数元素的子元素
【发布时间】：2015-10-30 17:16:43
【问题描述】：

我需要设置'a'元素的悬停，它是'tr'的子元素，由nth-child（偶数）选择器选择。

基本上我有一个多行的普通表格，每个表格单元格内都有一个“a”链接，我想在悬停时突出显示，但仅在偶数行中。

我的 CSS 代码：

.table-striped tr:nth-child(even) td a:hover {
    color: #3c3c3c;
}

而且它不起作用。

我该如何解决这个问题？

.table-striped tr:nth-child(even) td a:hover {
  color: Red;
}

<table class="table-striped">
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
</table>

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
您的 CSS 似乎工作正常。检查我添加的代码段。

标签： html css css-selectors hover

【解决方案1】：

试试这个：

.table-striped tr:nth-child(even):hover td a {
  color: #3c3c3c;
}

【讨论】：

当a 悬停在行的任意位置时，这将改变颜色。

【解决方案2】：

您使用的 css 运行良好：

.table-striped tr:nth-child(even) td a:hover {
    color: #3c3c3c;
    color:red;/*for dislay i have use this red color;*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
</table>

【讨论】：