在同一元素中定义伪类和伪元素

Question

我的问题很简单，我正在尝试做的是:hover，:after和:before，我希望在嵌入相同元素之后悬停anf，查看我的CSS代码： -

#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before { 
    background-position: 65% 65.7%;
}

此处元素在:before中有一个图标，我删除或修改，我也希望对它有悬停效果......

对此有任何解决方案，我的控制台没有显示悬停效果？

Answer 1

有趣的问题。如果你能向我们展示一个有用的例子，我们可能会提供更多帮助。

然而，从理论上讲，你尝试做的事情并没有错（虽然不是所有的浏览器都会喜欢它：特别是IE8及以下版本）。

这里要理解的重要一点是:hover是伪类，而:before是伪元素。

以下是the standard的快速摘录（感谢先前在Stack Overflow上的this answer）：

  

伪元素允许选择器中的任何位置使用伪类   只能在选择器的最后一个简单选择器之后附加。

您所犯的错误在于您的语法：您追加它们的顺序。

请改为尝试：

#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before { 
    background-position: 65% 65.7%;
}

那应该按照你的意愿行事。但是，这不会给你很好的跨浏览器覆盖率，并不是所有浏览器都支持的实现。

更好的方法是：

• 将:before元素重置为空（覆盖您无法访问的样式）;
• 在锚点上使用非重复的背景图像（以显示图像），并使用左边的填充来给出缩进;
• 然后，您可以使用CSS中的锚点上的:hover以您认为合适的任何方式切换背景图像。

这将为您提供更好的跨浏览器兼容性。