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

Question

我正在尝试获取一个伪元素项，当父元素悬停时它会发生变化。这里的伪元素是.child：after。我知道这有效：

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

但这似乎不起作用：

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

有什么想法吗？谢谢!!

Answer 1

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

另请注意，:after适用于未替换的元素（im，input，textarea等）（refference：replaced elements。）

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

您可以使用实例https://jsfiddle.net/wq2edhf3/。