html如何更改子元素文字颜色 CSS更改父级悬停上的子元素字体颜色

我试图让它如此：当将鼠标悬停在td上时，跨度内部变为白色，并且td的背景变为蓝色。但是，没有一个类似的问题似乎对我有帮助。表例如CSS更改父级悬停上的子元素字体颜色

第一行：

Account Holder Collection Procedures

AMVIR Help Sheet

下面是一些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;

}

这是上面的CSS是什么样子，如果我把我的鼠标在TD上，而不是跨度：

解决方案：

div[class*="et_pb_tab_"] td:hover span{

color: #fff !important;

}

+2

你的CSS似乎完全依赖于这个类'.et_pb_tab_0'我看到无处的HTML。 –

+0

这是一个更大更复杂模块的snipet。这是不相关的，因为我可以使用这个CSS来设置html中的内容。我只是修剪了脂肪以节省一些空间。我的问题与语法有关，而不是这个例子的样子。 –

+0

根据您已经定义的其他样式，'td：hover span {color：#fff！important;}'应该可以让您在那里 –

如果觉得《html如何更改子元素文字颜色 CSS更改父级悬停上的子元素字体颜色》对你有帮助，请点赞、收藏，并留下你的观点哦！