如何使用JQuery单击伪元素

Question

如何使用jQuery点击伪元素我无法在元素前单击以更改背景颜色：

＆＃13;

＆＃13;

$(".box:before").on('click',function(){
    (".box h1").css("background-color","red");
    });

＆＃13;

.box:before{
    content:"";
    width:10px;
    height:10px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <h1>hello</h1>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，您错过了此说明中的$符号：

  (".box h1").css("background-color","red");

  

然后你不能操纵:after，因为它在技术上不是一部分   因此，任何JavaScript都无法访问DOM。但是你   可以使用指定的新:after添加新类。

SOURCE: Access the css “:after” selector with jQuery

请检查＆amp;运行以下代码片段以获得替代解决方案：

$(".box").on('click',function(){
    $(".box h1").css("background-color","red");
    });

.box:before{
    content:"";
    width:10px;
    height:10px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <h1>hello</h1>
    </div>