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 mousemove上使用two并检查鼠标位置是x和x + width element1之间（相对于父div { {1}}）和one同样的事情。

当我将y应用于-webkit-transform:rotate(45deg);

时，该解决方案有效但存在问题

我是新手，无法发布图片，但很容易理解div element1上mousemove处理的区域与two 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; 
}

掩码div上的jQuery mousemove处理程序

1 个答案: