<a> in a table doesn&#39;t work

Question

Hi i have this piece of CSS:

tbody:hover td {
   color: transparent;
   text-shadow: 0 0 3px #aaa;
}

tbody:hover tr:hover td {
   color: #444;
   text-shadow: 0 1px 0 #fff;
}

When i hover a row of a table i want that the other rows of that table become transparent. This CSS work for the normal td filled with text, but for the td filled with link(a tag) it doesn't work. I can't find why.

This is a part of the HTML code

<tbody>
    <tr>
        <td>Untitled.txt</td>
        <td>File di prova</td>
        <td><a href='/comment/comment.php?idF=182' style='color: black;'>Leggi i commenti</a></td>          
        <td><a href='get_file.php?id=182' style='color: black;'>Download</a></td>
    </tr>
</tbody>

Answer 1

我不确定是否可以仅使用CSS使其他人透明（CSS不能影响以前的兄弟姐妹）。但是，你不能两次使用:hover，除非你做这样的事情：

tbody tr:hover > td, tbody tr:hover > td a {
    color: #444;
    text-shadow: 0 1px 0 #fff;
}

为了找到透明度问题的解决方案，您可以尝试使用nth-child()来决定在悬停时更改哪个子项。例如：

tbody tr:nth-child(1):hover {
    color: transparent;
    text-shadow: 0 0 3px #aaa;
}

您还可以决定在不悬停元素时要执行的操作，例如：

tbody tr:nth-child(1):not(:hover) {
    // If element is not hovered
    color: transparent;
    text-shadow: 0 0 3px #aaa;
}

Answer 2

这很简单。您的标签具有内嵌样式。那些在css层次结构中排名很高。所以这不起作用的原因是这段代码：

style='color: black;'

删除内联样式并通过类应用它。

Answer 3

尝试使用inherit属性：

a {
    color: inherit !important; //important just for extra measure
}

Answer 4

我认为你也应该在你的CSS中添加一个标签。

tbody:hover td, tbody:hover td a {
  color: transparent;
  text-shadow: 0 0 3px #aaa;
}