如何在伪元素上添加点击事件?
伪元素是CSS中的一种特殊选择器, 用于在元素的特定位置插入内容, 它们被称为“伪元素”, 是因为它们不是实际存在于HTML DOM文档中的元素, 而是通过CSS来创建的, 那伪元素如何添加点击元素?
在页面上我们无法通过jQuery获取到元素中的伪元素进行事件绑定,所以我们利用pointer-events属性屏蔽元素操作事件, 将事件绑定到伪元素上。例:
html:
<div>盒子的内容</div>
css:
div{
pointer-events: none;
}
div:after{
pointer-events:auto;
}
js:
$('div').on('click', function () {
console.log(this) //该事件实际绑定元素是after伪元素
})
解决伪元素盖住点击事件
在伪元素代码中加上这句,可穿透伪元素点击
pointer-events:none;
伪元素的点击事件
1.父元素 使用 "pointer-events: none;" 伪元素使用"pointer-events: auto;"