CSS 更改父元素悬停时的子元素字体颜色

Question

我试图做到这一点，以便当我将鼠标悬停在 td 上时，内部的跨度变为白色，并且 td 的背景变为蓝色。然而，类似的问题似乎都对我没有帮助。

以表格第一行为例：

<tbody>
     <tr>

        <td>
            <h4>
                <span>
                    <strong>Account Holder Collection Procedures</strong>
                </span>
            </h4>
        </td>

        <td>
            <h4>
                 <span>
                     <strong>AMVIR Help Sheet</strong>
                 </span>
            </h4>
        </td> 

    </tr>
</tbody>

这是我尝试过的一些CSS，但不起作用：

td:hover > h4 > span{
color: #fff !important;
}

td:hover > span{
color: #fff !important;
}

td:hover ~ span{
color: #fff !important;
}

td:hover + span{
color: #fff !important;
}

td:hover span{
color: #fff !important;
}

这使得 td 背景颜色正确，但如果您将鼠标悬停在跨度上，则只会更改跨度颜色，而不是 td：

td:hover{
background: #0073a5;
}

span:hover{
color: #fff !important;
}

如果我将鼠标放在 td 上，而不是跨度上，上面的 CSS 看起来就是这样的：

解决方案：

div[class*="et_pb_tab_"] td:hover span{
    color: #fff !important;
}

Answer 1

CSS 将变成这样：

td:hover {
    background-color: blue;
}

td:hover span {
    color: white;
}