蒙面 div 上的 jQuery mousemove 处理程序

Question

这是我的 HTML：

<div id="one"><div id="element1"></div></div>
<div id="two">some stuff</div>

div one 和 two 是相同宽度和高度的矩形

这是 CSS：

#one { position: relative; width: 390px; height: 482px; }
#two { position: relative; z-index: 100; top: -482px; width: 390px; height: 482px; }

如您所见，div two 位于用作掩码的 div one 上方

我需要这样做：

$('#element1').mouseover(function(e){ alert('Hello') });

我在 div two 上使用 mousemove 并检查鼠标位置是否在 element1 的 x 和 x + width 之间（相对于父 div one）和 y 的相同操作.

该解决方案有效，但当我将-webkit-transform:rotate(45deg); 应用于element1 时出现问题

我是新手，无法发布图片，但很容易理解，div two 上的mousemove 处理的区域在旋转时与element1 div 不对应。

我如何知道鼠标何时移到element1上方？

Answer 1

基本上你的问题是 div two 覆盖了另一个元素，不允许在覆盖的元素中注册任何事件。

您可以通过将 CSS pointer-events:none; 应用于 div two 以允许在 div 下方注册事件来解决此问题。

---

DEMO - 在 div 上使用 pointer-events:none; two

---

DEMO 使用您发布的确切代码，并为视觉表示和旋转添加了以下内容：

#one{
    border: 1px solid red;
}

#element1{
    background-color: blue;
    border: 1px solid blue;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    height: 5px;
}

CSS 更改为 #two:

#two { 
    position: relative; 
    pointer-events:none; 
    z-index: 100; 
    top: -482px; 
    width: 390px; 
    height: 482px; 
}