Question

所以我在另一个元素后面有一个元素，但它仍然是可见的（它仅部分由元素本身覆盖，但在上面的元素的margin属性中完全覆盖）。我想在鼠标悬停时触发鼠标事件，但由于前面的元素，它不会传递给它。我知道如何计算我是否已超过它以及如何指向它，但我不知道如何将事件发送给onmouseover或hover或onmouseout。

如果有帮助我会使用document.getElementById("<calculated id>")指向它。我知道这是有效的，因为它的ID是基于它在网格中的位置，所以我只需要计算鼠标的位置并将其与网格相关联。

同样应该发生的事件（但不是因为前面的事情）是:hover，它通过CSS触发一个简单的过渡动画。

Answer 1

document.getElementById('elementInFront').addEventListener('mouseenter', function(){
    document.getElementById('elementBehind').DoYourStuff();
});

Answer 2

这有用吗？我不确定我是否明白你的意图。

var item = document.getElementById("CalculatedId");
item.addEventListener("mouseover", func, false);

function func()
{  
   console.log("Hovered");
}

Answer 3

您可以使用css属性

pointer-events: none;

在顶部元素上。这将允许所有鼠标事件“落入”后面的元素。不幸的是，这在IE中不起作用，唯一的简单替代方法是使前面元素的背景透明

通过javascript将鼠标事件发送到元素

3 个答案: