Question

我有一个表格，每行都有一个链接，应该在悬停时突出显示（tr bgcolor和link）。我可以使用以下代码使用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/

Answer 2

a元素是内联元素。这意味着它只占用足够的空间来容纳它的内容。因此，只有当鼠标停留在此时才会触发悬停。

您可以更改此行为，以便a标记通过添加以下css将td标记更改为块级元素来占用.style2 a{ display:block; }中的所有可用空间。

这将以最小的麻烦提供您所需的结果。

注意：这只会导致td占用td元素中的所有空格。如果{{1}}列是行中唯一的列，那么这将按预期工作，但如果添加更多列;那么只有这个特定的列才会触发链接。

Answer 3

试试这个：

a {
   display:block
}

这将使您的<a>充分<td>，然后当您悬停<td>时，不仅颜色会发生变化，而且当您点击整个{{1}时它将是一个锚（如按钮）。

Answer 4

是的，你可以这样做，但你必须给一个班级<a>标签。

然后你可以写css：

.style2 tr:hover {
    background-color: blue;
}
.style2 tr:hover a.a_link {
    color: white;
}

然后

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

改变tr背景颜色和悬停链接与css

4 个答案: