css - :hover feature , 如何使用css接近与js代码相同的结果

Question

如果我有一张 table :

<table border="1" id="my_table">
    <tr>
        <td> data-1</td>
        <td> data-1</td>
        <td> data-1</td>
    </tr>

    <tr>
        <td> data-2</td>
        <td> data-2</td>
        <td> data-2</td>
    </tr>

</table>

我想为每一列 或该行添加悬停背景，这是为每一 <td>在悬停的行中，我可以使用 javascript 来完成此操作，如下所示:

 $('#my_table tr').hover(function() {
    $(this).children('td').css('background-color', '#330099');
  }, function() {
    $(this).children('td').css('background-color', '');
  });

上面的 js 代码运行良好，我的问题是如何使用 CSS 来实现相同的结果？

我试过的是

tr > td:hover{
    background-color: #330099;
}

但是上面的代码只改了一个 <td>的背景颜色而不是所有 <td>该行的 s'。如何摆脱这个？

我的密码是here on jsfiddle .

------------------------------------顺便说一句---- ------------------------------

请不要建议我只使用:

tr:hover{background-color: #440099}

我知道这是可行的，但出于我的特殊需要，我更愿意更改所有 <td>鼠标悬停在某一行时s的背景颜色，就像js代码所做的那样。

因为我已经设置了我的 <td>隐藏 tr:hover 的背景背后的功能，所以，我必须改变<td>明确的背景。 (虽然这不在我上面的示例代码中)

Answer 1

怎么样:

tr:hover td {background-color: #440099;}

http://jsfiddle.net/mM2Ep/

希望对您有所帮助:)