javascript - :after selector not working if jquery inserts . 在链接中处于事件状态

Question

我正在创建一个菜单，单击导航后，每个阶段都有不同的图像背景。我正在使用 :after 所以我可以将它定位为绝对位置并将它放在我想要的位置和文本后面。这也是因为我已经将 :before 用于另一个目的。它以前是有效的，但我正在使我的 CSS 更短和更有效，一切都很好，除了当单击链接时，以下 css 选择器将不起作用:

.sub-nav a:active:after, .sub-nav a.active:after

一旦点击并且 :active 状态被激活，图像就会出现。一旦这个扇区打开，jquery 就会添加 .active 类，但问题是 :after 不会加载。

我快疯了，也许有人能看到我正在做的错误......

特此，你有我的实际代码的 fiddle : http://jsfiddle.net/tGXWG/2/

:after代码插入的是这样的背景图片..

:悬停:

:active + .active:

Answer 1

好的，所以在查看您的站点之后，您似乎唯一缺少的是将 opacity: 0.9; 添加到 .sub-nav a:hover:after, .sub -nav a:active:after, .sub-nav a.active:after

.sub-nav a:hover:after, .sub-nav a:active:after, .sub-nav a.active:after {
    position: absolute;
    left: 6px;
    bottom: 2px;
    z-index: -1;
    opacity: 0.9;
}