如何在父项悬停时更改伪元素子项？

Question

我正在尝试获取一个伪元素项，以便在将鼠标悬停在父项上时进行更改。这里的伪元素是.child:after。我知道这有效：

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

但这似乎不起作用：

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

有什么想法吗？谢谢！！

Answer 1

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

另请注意，:after 适用于非替换元素（im、input、textarea 等）（参考：replaced elements。）

另外：注意.child:after选择器的显示属性。

这是一个工作示例 https://jsfiddle.net/wq2edhf3/。