javascript触发器悬停在绝对元素上和绝对元素下

我想检测两个元素上的悬停事件：绝对定位元素和位于其下的元素

下面是一个简化的问题：

HTML:

JS:

和jsfiddle:

编辑：

我希望得到以下结果：

• （在文本中，在svg中）当您同时完成这两个任务时
• （输出文本，在svg中）当您只关注svg而不是内容时
• （在文本中，输出svg）当您仅在内容上，而不是svg上时
• （输出文本，输出svg）当您还没有完成它们时

---

这不起作用，因为圆圈将其下方的内容隐藏起来。 但是，您可以查看以下可能性：

• 将内容的子项圈起来。这样悬停事件就会出现气泡。这样，圆圈中的所有内容都将输出“over text”和“over svg”，这并不是您真正想要的

• 写一点数学题，检查你是否看完了课文

我将在这里尝试第二种方法：

var输出=$（“#输出”）；
var inCircle=假；
$（“#内容”）.mouseenter（函数（e）{
输出文本（“文本中”）；
}).mouseout（功能（e）{
输出文本（“输出文本”）；
});
var output2=$（“#output2”）；
$（“#svg”）.mouseenter（函数（e）{
output2.text（“在svg中”）；
inCircle=真；
}).mouseleave（功能（e）{
output2.text（“输出svg”）；
inCircle=假；
});
$（文档）.mousemove（函数（e）{
如果（！inCircle）return；//当不在圈中时，我们返回这里
var$content=$（“#content”）；
var offset=$content.offset（）；
//检查是否在内容元素中
如果（e.pageX>offset.left&&
e、 pageXoffset.top&&
e、 pageY
#内容{
背景颜色：绿色；
}
#svg{
位置：绝对位置；
左：100px；
顶部：15px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。
我添加这个新答案是为了解决我第一个答案评论中提到的多边形中的点问题

要检查一个问题，您必须实现一个算法，该算法是为解决这个非平凡问题而设计的。
我将在这里展示其中一个实现

function point_in_polygon(P,R){

    function det(i){
        return (P[i].x - R.x) * (P[i+1].y - R.y) - (P[i+1].x - R.x) * (P[i].y - R.y);
    }

    var w = 0,
        len = p.length,
        i = 0,
        q = [];

    for(;i < len;++i){

        if(P[i].x > R.x && P[i].y >= R.y) q[i] = 0;
        if(P[i].x <= R.x && P[i].y > R.y) q[i] = 1;
        if(P[i].x < R.x && P[i].y <= R.y) q[i] = 2;
        if(P[i].x >= R.x && P[i].y < R.y) q[i] = 3;

    }

    q[len] = q[0];

    for(i = 0;i < len;++i){

        switch(q[i+1] - q[i]){
            case -3: ++w; break;
            case  3: --w; break;
            case -2: if(det(i) > 0) ++w; break;
            case  2: if(det(i) < 0) --w; break;
        }

    }

    return w;
}

第二个是需要检查的当前点：

window.addEventListener('mousemove', function(e){

    var R = {x:e.pageX, y:e.pageY};

}

point\u in_polygon
-函数返回
卷绕编号
，当该点位于多边形内部时，该编号大于零

当不使用长方体而使用多边形时，此函数可以轻松地适应所有情况。
不幸的是，它无法解决我的问题：在目标页面中，我希望有许多类似于内容的元素，因此我无法将svg作为它们的子元素。此外，如果内容是多边形，那么数学也不是一个好主意……在哪种html情况下，div会是多边形？将该示例应用于许多div是没有问题的。对于您的问题，没有其他解决方案，因为html就是这样工作的。然而，这个答案是正确的，也是对你问题的有效答案。我不是说div是一个多边形，而是一个具有这个id的元素。好的，如果你认为没有更多的方法来解决这个问题，我将结束这个问题。我不认为有任何可能性
var output = $("#output");
$("#content").mouseenter(function(e){
    output.text("in text");
}).mouseout(function(e) {
    output.text("out text"); 
});

var output2 = $("#output2");
$("#svg").mouseenter(function(e){
    output2.text("in svg");
}).mouseleave(function(e) {
    output2.text("out svg"); 
});

function point_in_polygon(P,R){

    function det(i){
        return (P[i].x - R.x) * (P[i+1].y - R.y) - (P[i+1].x - R.x) * (P[i].y - R.y);
    }

    var w = 0,
        len = p.length,
        i = 0,
        q = [];

    for(;i < len;++i){

        if(P[i].x > R.x && P[i].y >= R.y) q[i] = 0;
        if(P[i].x <= R.x && P[i].y > R.y) q[i] = 1;
        if(P[i].x < R.x && P[i].y <= R.y) q[i] = 2;
        if(P[i].x >= R.x && P[i].y < R.y) q[i] = 3;

    }

    q[len] = q[0];

    for(i = 0;i < len;++i){

        switch(q[i+1] - q[i]){
            case -3: ++w; break;
            case  3: --w; break;
            case -2: if(det(i) > 0) ++w; break;
            case  2: if(det(i) < 0) --w; break;
        }

    }

    return w;
}

var P = [
    {x:50, y:50},
    {x:200, y:30},
    {x:150, y:100},
    {x:300, y:300},
    {x:100, y:200},
    {x:50, y:50},
];

window.addEventListener('mousemove', function(e){

    var R = {x:e.pageX, y:e.pageY};

}