Div1涵盖Div2：如何检查鼠标是否覆盖了Div2？

Question

我有点迷茫。 我试着检查我的鼠标是否在另一个Div覆盖的Div上。 如果可能的话，我会搜索一个vanilla js解决方案。

我试图使用elementFromPoint方法，但它似乎只给我顶级Div。 我也试图搞乱“onmouseover”事件，但我也没有找到解决方案。 也许我只是忽略了一些东西。

任何想法如何解决这个问题？ 我想要一种方法来检查我的鼠标是否在较小的Div2上。 我做了一个jsFiddle来展示这种情况。 我制作了覆盖Div半透明，以便从设置中更容易理解。

http://jsfiddle.net/y2L5C/

  <div id="div1"></div>
    <div id="div2"></div>



   #div1 {
    width:300px;
    height:300px;
    background:red;
    position:absolute;
    top:0px;
    z-index:1;
    opacity: 0.5;
}

#div2 {
    width:200px;
    height:200px;
    background:blue;
    position:absolute;
    top:0px;
}

Answer 1

这是一个快速而肮脏的解决方案。 我会留给你优化它。 这是小提琴： http ： //jsfiddle.net/y2L5C/1/

var div2 = $("#div2"),
    width = div2.outerWidth(true),
    height = div2.outerHeight(true),
    offset = div2.offset(),
    top = offset.top,
    left = offset.left;

$(document).mousemove(function(evt) {
    if(evt.pageX <= (left + width) && evt.pageX >= left &&
       evt.pageY <= (top + height) && evt.pageY >= top) {
        $("#indicator").text("Over the div #2");
    } else {
        $("#indicator").text("NOT over the div #2");
    }
});

Answer 2

如果您要检查，如果你的鼠标在<div>被另一个所覆盖<div>你可以通过声明该代码实现这一点： pointer-events: none; 覆盖<div>的css 。

例如：

<div id="under"></div>
<div id="over"></div>

将其添加到您的css文件中：

#over{ pointer-events: none; }

在这种情况下，将忽略具有id=over的div所有指针事件。 您现在可以添加此代码以测试其是否正常工作。

添加此JavaSCript代码：

$('#under').mouseover(function() {
    alert("Mouse is over the div having the id='under'");
});

试试看！ 祝好运！

Answer 3

有趣的概念。 我想提一下，对于普通的CSS事件，有简单的CSS解决方案，比如这里 。 但是，如果你要做的是启动Javascript事件，那么麻烦的是onMouseOver不会触发#div1如果#div2在它之上。

一个非常简单的潜在解决方案是创建一个脚本来复制#div2元素的位置，并将样式更改为更高的z-index。 虽然JQuery可能“更容易”创建它，但您当然可以创建一个vanilla JS解决方案。 此脚本可能会为您提供有关如何找到定位的一些指导。 您可以使用element.style值来分配CSS值。 如果您的元素位置由CSS声明，那么您可以执行以下操作：

var div1 = getElementById('div1');
var div2 = getElementById('div2');
var newElem = document.createElement('div');
newElem.id = 'div2makefacade';

现在你可以使用newElem.style.top等并分配div2.style.top的值，或者你甚至可以指定一个具有正确位置值的自定义类。 当您启动onMouseOver时，您可以在#div2makefacade而不是#div2执行此操作，并对#div2执行操作

Answer 4

好吧，我做了一个函数，也许它以某种方式帮助你，首先在你的视图中你必须加载像这样的jquery librarie

<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>

和你的css你有这个

.visiblepanel{
  display: none;   
}

.visiblepanela{
  display: none;   
}

你的脚本，你必须添加悬停功能

$('#quickstart').hover(function() {
    $('#visiblepanel').toggle(); 
});

$('#quickstarta').hover(function() {
    $('#visiblepanela').toggle(); 
});

和你的HTML身体

<div id="quickstart">Div 1</div>

<div id="quickstarta">Div 2</div>

<div id="visiblepanel" class="visiblepanel">mouse encima div 1</div>

<div id="visiblepanela" class="visiblepanel">mouse encima div 2</div>

因此，当鼠标悬停在DIV 1上时，它会显示你的鼠标在那里的建议，依此类推DIV 2 ...我希望我能帮助你......