Question

我正在使用HTML

<div id="Chevron" style="width: 100%">
    <ul>
        <li>
            <a href="#" style="z-index: 6; width: 80px;">Create New Request.</a>
        </li>
        <li>
            <a href="#" style="z-index: 5; width: 80px;">Add NPAC Document.</a>
        </li>
        <li>
            <a href="#" style="z-index: 4; width: 80px;">Send To reviewers</a>
        </li>                           
    </ul>
</div>

在我的css课程中我有

#Chevron ul li a:after {
    z-index: 1 ;
    content: "" ;  
    border-top: 40px solid transparent ;
    border-bottom: 40px solid transparent ;
    border-left: 40px solid #3498db ;
    position: absolute; right: -40px; top: 0 ;
}

所以现在我想改变ul的所有三个元素的颜色。所以我正在使用jquery。

$(document).ready(function () {
    $("#Chevron ul li a").each(function (index, element) {
        $(element).css('background', cars[index]);
        //$(element).css('border-left-color', cars[index]);
    });
});

但它只改变了锚定元素的颜色而不是它：a：在边框留下颜色之后。

那么我怎样才能改变a：after元素的颜色。

由于

Answer 1

如上所述，这是Access the css ":after" selector with jQuery

的副本

您无法访问元素的:after属性，因为它在DOM中确实不存在。相反，您可以添加/更改元素的css类。

这是一个片段

＆＃13;

$(document).ready(function () {
    $("#Chevron ul li a").each(function (index, element) {
        // $(element).css('background', cars[index]); // disabled to make the snippet works
        $(this).addClass("changed"); // you're adding the .changed class
    });
});

＆＃13;

#Chevron ul li a:after {
    z-index: 1 ;
    content: "" ;  
    border-top: 40px solid transparent ;
    border-bottom: 40px solid transparent ;
    border-left: 40px solid #3498db ;
    position: absolute; right: -40px; top: 0 ;
}

/* this is your .changed class */
#Chevron ul li a.changed:after {
    border-left: 40px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="Chevron" style="width: 100%">
    <ul>
        <li>
            <a href="#" style="z-index: 6; width: 80px;">Create New Request.</a>
        </li>
        <li>
            <a href="#" style="z-index: 5; width: 80px;">Add NPAC Document.</a>
        </li>
        <li>
            <a href="#" style="z-index: 4; width: 80px;">Send To reviewers</a>
        </li>                           
    </ul>
</div>

＆＃13;

如何更改伪锚的边框颜色

1 个答案: