jquery - 伪元素后可点击

Question

演示

jQuery：

$('#main:after').click(function(e){
    e.preventDefault();
    $('#main').hide();
});

CSS：

#main{
    background-color: red;
    width: 100%;
    height: 200px;
}
#main:after{
    position: absolute;
    bottom: 200px;
    background-color: blue;
    width: 20px;
    height: 20px;
    content: " ";
}

单击到蓝色div时如何隐藏红色div？

Answer 1

更新

我玩了一些游戏，并认为我已经想出了解决原始提供代码的这个问题的方法。

本质上，我已将相同的:afterCSS 分配给“虚拟”类，然后使用虚拟类动态创建和销毁元素。在创建和销毁之间，我们能够获得必要的尺寸（宽度、高度、定位）。最后我们可以将这些值与点击坐标进行比较......

演示：http: //jsfiddle.net/gvee/gNDCV/6/

CSS

#main {
    background-color: red;
    width: 100%;
    height: 200px;
    position: relative;
}
#main:after, .mainafter {
    position: absolute;
    bottom: -100px;
    right: 50%;
    background-color: blue;
    width: 40%;
    height: 20px;
    content:" ";
}

jQuery

$('#main').click(function (e) {
    var pseudoElement = $('<div></div>').addClass('mainafter');
    $(this).append(pseudoElement);
    var w = pseudoElement.width();
    var h = pseudoElement.height();
    var x = pseudoElement.position().left;
    var y = pseudoElement.position().top;
    pseudoElement.remove();
    
    if (e.pageY - $(this).position().top  > y     &&
        e.pageY - $(this).position().top  < y + h &&
        e.pageX - $(this).position().left > x     &&
        e.pageX - $(this).position().left < x + w
       ) {
        alert('Not red');
    }

});

如果陈述说明：

PageX是光标的水平坐标。 X是蓝色框左边缘的坐标。 W是蓝色框的宽度。

因此，我们可以通过简单的加法计算出蓝色框的右侧边缘：X+W。

相同的逻辑可以应用于垂直坐标（顶部=Y，底部=Y+H）。

我们上面的 JQuery 中的if语句检查是否PageX落在蓝色框的左右边缘PageY之间，并且位于顶部和底部之间。即是蓝色框中的光标！

---

您提供的代码有一个 [kludgy] 解决方法（:after内容位于其容器下方）...

计算鼠标点击的坐标，看看是否超过了#maindiv的高度...

演示：http: //jsfiddle.net/gvee/gNDCV/3/

CSS

#main {
    background-color: red;
    width: 100%;
    height: 200px;
    position: relative;
    margin-bottom: 20px; /* to clear content:after */
}
#main:after {
    position: absolute;
    bottom: -20px; /* -(this.height) */
    background-color: blue;
    width: 20px;
    height: 20px;
    content:" ";
}

jQuery

$('#main').click(function (e) {
    if (e.pageY - $(this).offset().top > $(this).height()) {
        alert('Not red');
    }
});