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

Question

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

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

但这似乎不起作用:

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

有什么想法吗？谢谢!!

Answer 1

尝试在::after伪类中加入content:''；

另请注意，:after 适用于非替换元素(im、input、textarea 等)(引用:replaced elements。)

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

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