通过JavaScript向元素发送鼠标事件

Question

所以，我有一个元素在另一个元素后面，但它仍然可见（它只被部分地覆盖，但是完全被上面元素的margin属性覆盖）。当我鼠标悬停时，我想触发一个鼠标事件，但由于前面的元素，它无法传递。我知道如何计算是否悬停在上面并如何指向它，但我不知道如何发送onmouseover或hover或onmouseout事件。

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

此外，应该发生的事件（但由于前面的元素而没有发生）是通过CSS触发简单的过渡动画的:hover。

- SalmonMode

Answer 1

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

- idrumgood

---

在前面的元素后面可能有多个元素。这将只发送到其中一个，并且不告诉我如何发送事件以触发悬停或鼠标悬停，即使这可以正确地获取其后面的元素。感谢您的尝试。 - SalmonMode

Answer 2

这个有效吗？我不确定我是否理解了您的意图。

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

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

- Sam R.

Answer 3

你可以使用CSS属性。

pointer-events: none;

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

- Pabs123

---

无论是在Chrome还是Firefox中都无法工作。我以前尝试过，最多只能算是实验性的。我正在尝试以可靠的方式来完成它，而现在唯一的方法似乎是找出鼠标停留在哪个位置，并强制发送一个事件到它，如果可以的话，但是pointer-events: none;不起作用。 - SalmonMode