Question

我试图找出如何在一行内将表格单元格（TR＆gt; 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定位超链接，这意味着只有当有人将光标放在超链接而不是表格上时，它的颜色才会改变。这是当有人将光标放在桌子上时应该如何定位超链接：

.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

将Hyper Link和Table定位在一起

1 个答案: