Question

我想编辑：在css用jQuery创建的元素之后。

<div class="box">
            <h3 class="social">Social</h3>
              <ul>
                <li><a href="https://www.youtube.com/"
                  onmouseout="bgc('rgba(0, 0, 0, 0.4)')"
                  onmouseover="bgc('rgba(230, 33, 23, 0.88)')">Youtube</a></li></ul></div>

.box ul li a:after {
    content: '';
    display: block;
    width: 0px;
    height: 1px;
    background: #fff;
    transition: width 1s;
}

.box ul li a:hover:after {
    width: 90%;
}
/* jQuery */
$("document").ready(function bgc(color){
  $('.box ul li a').siblings().css({"border-color": color});
});

但是这段代码不起作用。有什么方法可以做到吗？

Answer 1

您无法使用JavaScript访问after或before元素，但您可以通过将类附加到其父元素来更改其样式。

.colorBlue:after {
  border-color: blue;
}

然后：

$('.box ul li a').toggleClass('colorBlue');

会更改after元素的边框颜色。

Answer 2

你不能在jQuery中选择伪元素，因为伪元素他们自己不是DOM的一部分。 - Selecting and manipulating CSS pseudo-elements

虽然它们是由浏览器通过CSS呈现的，就好像它们就像其他真正的DOM元素一样，因此您无法直接使用jQuery（或任何 JavaScript API）来选择和操作它们，甚至不是Selectors API）。

有关详情，请参阅此问题：Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

编辑css：之后使用jQuery .siblings（）

2 个答案: