javascript - 使用 css 更改 tr 背景颜色和悬停链接

Question

我有一个表格，每行都有一个链接，应该在悬停时突出显示(tr bgcolor 和链接)。我可以使用带有以下代码的 javascript 执行此操作:

<style type="text/css">
<!--
.style1 a:link, .style2 a:visited {
   color: black;
   text-decoration: none;
}
-->
</style>

<table class="style1" width=50%>
<tr     onMouseOver="document.getElementById('test').style.color='white'; this.style.backgroundColor='blue';"
    onMouseOut="document.getElementById('test').style.color='black'; this.style.backgroundColor='transparent';"
    onClick="location.href='foo.html'">
            <td><a href="foo.html"><span id="test">link lala</span></a></td>
</tr>
</table>

但我想用 css 来做。

我尝试了以下方法:

<style type="text/css">
<!--
.style2 tr:hover {
    background-color: blue;
}
.style2 {
    color: black;
}
.style2 a:link, .style2 a:visited {
    color: black;
    text-decoration: none;
}
.style2 a:hover {
    color: white;
}
-->
</style>

<table class="style2" width=50%>
   <tr>
      <td><a href="foo.html">link lala</a></td>
   </tr>
</table>

但链接悬停仅在鼠标移到链接顶部(而不是整个 tr 顶部)时才起作用。链接也存在问题，该链接仅通过单击实际链接(而不是整个 tr 行)才起作用。

我确信这可以通过仅使用 css(至少同时悬停)来完成。 你能帮我一下吗？

谢谢

Answer 1

如果我理解正确，这将解决您的问题:

.style2 tr:hover {
    background-color: blue;
}
.style2 tr:hover a {
    color: white;
    text-decoration: none;
}

这是结果:http://jsfiddle.net/56M4U/1/