<a>表格中的</a> CSS樣式<a>無效</a>

Question

嗨，我有這段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;
}

當我將鼠標懸停在表的一行上時，我希望該表的其他行變得透明。 此CSS適用於填充文本的普通td，但不適用於填充link（a標簽）的td。 我找不到原因。

這是HTML代碼的一部分

<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;
}