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

您的问题是，您没有提及listText.text += moreString的父级，这会在您将其悬停时影响它。在我们的例子中<span>。 应该总是这样：

<td>

因此，您的CSS需要编辑为：

.parent:hover .child {
   /* ... */
}

您可以看到它符合上述格式！

这与问题无关，但您可以将td:hover{ background: #0073a5; } td:hover span{ color: #fff !important; } 添加到＆lt; transition: all .1s ease;和td>以获得更流畅的动画

Answer 2

.et_pb_tab_0 td:hover h4{ color: #fff !important; }

Answer 3

CSS将成为这个：

td:hover {
    background-color: blue;
}

td:hover span {
    color: white;
}