父项悬停时如何更改伪元素子项? [英] How to change pseudo-element child when parent is hovered over?

问题描述

我正在尝试获取一个将其作为父元素悬停时要更改的伪元素的项目.这里的伪元素是.child:after.我知道这可行:

I'm trying to get an item that is a pseudo element to change when the parent is hovered over. The pseudo element here is .child:after. I know this works:

.parent:hover .child { 
   background: #FF0000; 
  }

但这似乎不起作用:

.parent:hover .child:after { 
   background: #FF0000; 
  }

有什么想法吗?谢谢！！

Any ideas? Thank you!!

推荐答案

尝试将 content:''添加到 :: after 伪类；

还请注意，:after 可以与不可替换的元素(im，input，textarea等)一起使用(参考文献:

Also be aware that :after works with non-replaced elements (im, input, textarea, and so on) (refference: replaced elements.)

此外:请注意 .child:after 选择器的显示属性.

Additionally: pay attention to display property of .child:after selector.

这里有一个工作示例 https://jsfiddle.net/wq2edhf3/.

这篇关于父项悬停时如何更改伪元素子项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！