JQ设置伪元素

Question

<ul id="menu-nav-menu-ch" class="nav navbar-nav">
    <li id="3">
        <a href="http:#">品牌理念</a>
        <ul class="sub-menu">
            <li>
                <a href="#">大宗商品期货套利</a>
            </li>
            <li>
                <a href="#">私募基金发行</a>
            </li>
            <li>
                <a href="#">益商仓储物流</a>
            </li>
        </ul>
    </li>
    <li id="4">
        <a href="#">品牌种类</a>
        <ul class="sub-menu">
            <li id="menu-item-795"><a href="#">鲜果</a></li>
            <li id="menu-item-796"><a href="#">果干</a></li>
            <li id="menu-item-798"><a href="#">果酱</a></li>
            <li id="menu-item-798"><a href="#">酵素</a></li>
        </ul>
    </li>
</ul>

设置css为.navbar-nav > li > a:after {

content: "";
width: 0px;
display: block;
visibility: hidden;
border-style: solid;
border-width: 0px 8px 8px;
border-color: #a89167 transparent;
position: absolute;
left: 50%;
bottom: 0px;
z-index: 1;
margin-left: -8px;

}

我想当鼠标放到id=3的li时，改变这个li的：after中的visibility. 用JQ该怎么写？

Answer 1

在添加一个class，通过切换class去实现，没办法通过js去修改伪类的

.navbar-nav > li > a.show:after {
  visibility: visible;
}

Answer 2

可以实现的哦，不过思路要改变一下：不是修改CSS，而是使用CSS样式覆盖技术，用新定义的CSS覆盖掉旧的。

同样的一句CSS，后定义的CSS会覆盖掉先前定义的。

$('#3').hover(function() {
    // 动态创建style标签，将新定义的css写在里面
    $('head').append('<style id="li-3">.navbar-nav > li > a:after { visibility: visible; }</style>');
}, function() {
    // 去掉这个style标签，css也恢复以前的样子了
    $('#li-3').remove();
});

哈哈，你这个需求挺有趣的，希望对你有帮助。

Answer 3

#3:hover > a:after {
    visibility: visible;
}

这样可以么？