Css 将 <a> 悬停在 <td> 内

Question

我有一个table，tr里面有一个td里面有一个link。好吧，我想做一个 class 可以改变 td 中 link 的颜色。这是我的代码：

<style>
    .dihover{transition: .5s;}
    .dihover:hover{background-color:#B7192A; color: white; cursor: pointer;}
    a.setan{color:#7E7E7E;}
    .setan:hover{color:white;}
    tr.dihover a:hover{color:white;}
</style>  

<table>
    <tr class="dihover">
        <td><a class="setan">this supposed to change colors</a></td>
        <td><a class="setan">this supposed to change colors</a></td>
    </tr>
</table>

我做错了什么？提前致谢！

Answer 1

我尝试修改你的代码..检查它是否是你需要的。
HTML

<table>
<tr class= setan>
    <td><a>this supposed to change colors</a></td>
    <td><a>this supposed to change colors</a></td>
</tr>

CSS

<style>
    .dihover{transition: .5s;}
    .dihover:hover{background-color:#B7192A; color: white; cursor: pointer;}
    a.setan{color:#7E7E7E;}
    .setan:hover{color:white;}
    tr.dihover a:hover{color:white;}
</style>

Css 将 <a> 悬停在 <td> 内

Css Hover <a> inside <td>

html

css

hover