在伪元素之后可单击

Question

demo

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

更新

我有一点玩耍，并且估计我已经找到了解决原始提供的代码的问题。

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

DEMO： 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内容位于其容器下方）...

计算鼠标点击的坐标，看看它是否超过#main div的高度...

DEMO： 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');
    }
});