1

我有一个表格，每行都有一个链接，应该在悬停时突出显示（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 来完成（至少同时悬停）。你能帮我一点吗？

谢谢

4

4 回答 4

4

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

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

结果如下：http: //jsfiddle.net/56M4U/1/

于 2013-01-11T11:15:28.030 回答
1

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

您可以更改此行为，以便a标记td通过添加以下 css 将其更改为块级元素来占用所有可用空间。

.style2 a{ 
   display:block;
}

这将以最少的麻烦提供您需要的结果。

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

于 2013-01-11T11:18:23.913 回答
0

试试这个：

a {
   display:block
}

这将使您<a>获得全部<td>内容，然后当您将鼠标悬停时，不仅颜色会发生变化<td>，而且当您单击整体<td>时，它将成为一个锚点（如按钮）。

于 2013-01-11T11:15:37.683 回答
0

是的，你可以这样做，但你必须给一个类来<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>
于 2013-01-11T11:33:50.507 回答