1

这是我的 HTML：

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

divone和two是相同宽度和高度的矩形

这是CSS：

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

如您所见， divtwo位于one用作遮罩的 div 上方

我需要做这样的事情：

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

我mousemove在 div上使用并two检查鼠标位置是否介于（相对于父 div ）和.xx + widthelement1oney

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

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

我怎么知道鼠标何时移到上面element1？

4

1 回答 1

1

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

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

演示-pointer-events:none;在 div 上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; 
}
于 2013-01-26T17:29:35.927 回答