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

博客讨论了在CSS中遇到的问题,即在鼠标悬停在表格单元格(td)上时,如何正确地改变内部span元素的颜色。作者尝试了多种CSS选择器组合,但未能实现期望的效果。问题主要在于找到正确的方法来当td被悬停时,同时改变td的背景色和span的字体颜色。解决方案涉及到使用适当的CSS选择器来确保span颜色在td被悬停时更改。
摘要由CSDN通过智能技术生成

我试图让它如此:当将鼠标悬停在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上,而不是跨度:

xvxio.png

解决方案:

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;}'应该可以让您在那里 –

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值