Question

我有问题，我需要更改表格背景颜色，我只能更改css。我希望将鼠标悬停在表格tr上，但是某些表格td具有内联bg颜色，我无法悬停在它上面。！重要不起作用。这是我的问题。

CSS

table{
border: 1px solid black;
}

table tr:hover{
background-color: pink !important;
}

HTML
<table>
    <tr>
        <td style="background-color:green;">test1</td>
        <td>test2</td>   
    </tr>
    <tr>
        <td>test3</td>
        <td>test4</td>
    </tr>
</table>

Answer 1

添加td规则修复了您的问题

table tr:hover td

＆＃13;

table{
border: 1px solid black;
}

table tr:hover,
table tr:hover td {
background-color: pink !important;
}

＆＃13;

<table>
    <tr>
        <td style="background-color:green;">test1</td>
        <td>test2</td>   
    </tr>
    <tr>
        <td>test3</td>
        <td>test4</td>
    </tr>
</table>

＆＃13;

Answer 2

您的风格不正确，在CSS中，您尝试更改tr背景，而不是td。

用这个替换css，如果你想改变粉红色的所有悬停线，它可以正常工作：

table tr:hover td{
    background-color: pink !important;
}

用这个替换css，如果你想改变粉红色的悬停td，它可以正常工作：

table td:hover{
    background-color: pink !important;
}

使用css悬停

2 个答案: