Question

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

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

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

  <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;声明这段代码css来实现这一点。封面<div>。

例如：

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

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

#over{ pointer-events: none; }

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

添加此id=over代码：

JavaSCript

试一试！祝你好运！

Answer 3

有趣的概念。我想提出一个简单的CSS事件，如here。但是，如果您要执行的操作是启动Javascript事件，那么问题是如果#div1位于其上，onMouseOver将不会触发#div2。

一个非常简单的潜在解决方案是创建一个脚本来复制#div2元素的位置，并将样式更改为更高的z-index。虽然JQuery可能更容易＆＃34;要创建它，你当然可以创建一个vanilla JS解决方案。 This script可能会就如何找到定位提供一些指导。您可以使用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 ...我希望我能帮助你......

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

4 个答案: