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

Question

我正在尝试在父元素悬停时更改伪元素的项目。这里的伪元素是.child:after。我知道这个方法可行：

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

但是这似乎不起作用：

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

有什么想法吗？谢谢！

- Clare12345

---

看看这篇文章，也许会有帮助 https://dev59.com/b2Up5IYBdhLWcg3wJU5J - Ramirez

谢谢，那帮助我找到了问题所在，但当我将鼠标悬停在三角形上时，它仍然变成了正方形。 - Clare12345

我的情况类似，但不起作用，因为在它之前我已经设置了 #grandparent .parent .child: after，因此设置 .parent:hover .child:after 的强度不够，应该是 #grandparent .parent:hover .child: after。 - Fanky

Answer 1

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

此外，请注意:after仅适用于非替换元素（例如im、input、textarea等）（参考文献：替换元素）。

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

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

- Ignat B.

---

嗨，伊格纳特，看起来我误判了情况。我在这里更新了一个Fiddle：https://jsfiddle.net/Clare12345/4s17m6vj/。当鼠标悬停在父div上时，我需要更改父div的伪元素。在Chrome开发者工具中，:after的位置让我认为它是子div的。你能告诉我如何使父元素的伪元素悬停效果生效吗？ - Clare12345

尝试使用.arrow_box2:hover::after来设置您的悬停状态；)。示例：https://jsfiddle.net/4s17m6vj/4/ - Ignat B.

由于某种原因，这种情况发生了：https://jsfiddle.net/Clare12345/4s17m6vj/3/。工具提示变成了一个正方形而不是三角形。 - Clare12345

请注意被注释掉的border-color属性，它会使得所有的边框变成黄色，而边框的组合形成了一个正方形。 - Ignat B.

完全明白了！我现在明白三角形之所以是三角形，是因为只有一个边框显示出来。谢谢！！！ - Clare12345