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

Question

我的问题其实很简单，就是我想要做的是:hover,:after和:before，我想要在嵌入相同元素后悬停anf，查看我的css代码： -

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

这里的元素在:before一个图标，可我CNT删除或修改的，也是我想有它的悬停效果...

这个任何解决方案，我的控制台不显示悬停效果？

Answer 1

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

然而，从理论上讲，你试图做的事情没有什么不妥（尽管不是所有的浏览器都会喜欢它：特别是IE8及以下版本）。

了解这里最重要的是，:hover是一个伪类，而:before是一个伪元素。

下面是the standard快速摘录（与感谢this answer以前在堆栈溢出）：

伪类在选择任何地方可以使用，而伪元素 可能只是最后的一个简单选择之后附加选择器。

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

试试这个：

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

，你想这应该做的。然而，这不会给你很大的跨浏览器覆盖范围，它不是所有浏览器都支持的东西。

一个更好的办法是：

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

这会给你更好的跨浏览器兼容性。