编辑css:使用jQuery .siblings()

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

不能使用after或before元素访问JavaScript，但可以通过将类附加到父元素来更改它们的样式。

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

然后：

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

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

Answer 2

您不能在jQuery中选择伪元素，因为伪元素本身并不是DOM的一部分。- 选择和操作CSS伪元素

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

有关更多信息，请参见此问题：在使用jQuery之后选择和操作CSS伪元素，例如：：