html - 同时定位超链接和表格

Question

我想弄清楚如何将表格单元格 (TR > TD) 和超链接放在同一行内。

示例 HTML:

<div class="CourseLayout">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="30" valign="middle"><a href="mylink">Test Link</a></td></tr>
</table>
</div>

CSS:

.CourseLayout tr:hover td, a:hover{
 background-color: #F1B242;
 color: #0C1A31;
 }

我希望用户能够滚动一行并突出显示该行，同时更改该行的字体颜色。有人可以告诉我我做错了什么吗？

Answer 1

您使用 a:hover 定位超链接，这意味着只有当有人将光标放在超链接上而不是表格上时，它的颜色才会改变。这是当有人将光标放在 table 上时您应该如何定位超链接:

.CourseLayout tr:hover td {
 background-color: #F1B242;
 }

.CourseLayout tr:hover td a {
 color: #0C1A31;
 }

.CourseLayout tr:hover td {
  background-color: #F1B242;
}
.CourseLayout tr:hover td a {
  color: red;
}

<div class="CourseLayout">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="30" valign="middle"><a href="mylink">Test Link</a>
      </td>
    </tr>
  </table>
</div>

DEMO