通过 JavaScript 传输事件来调用 :hover 伪类

这是场景：

您有两张图像，它们彼此堆叠在一起。最高阶的 z 索引图像负责处理点击事件（想想 Google 的 Map API）并且是透明的，而下面的图像负责视觉表示。

这是一个伪 HTML/CSS 表示：

div.visual-container {
    width: 10px;
    height: 10px;
}

div.visual-container:hover {
    background-color: #555;
}

div.click-container {
    width: 10px;
    height: 10px;
}

<div class='lowest'>
    <div class='visual-container'></div>
</div>

<div class='highest'>
    <div class='click-container'></div>
</div>

现在，当单击“最高”元素时，也会在“最低”元素上调度该事件。

基本思想：

function onHoverEventForHighest() {
    createMouseEvent(lowest_element, 'mouseover', event);
};

这部分很好并相应地传输事件，但它似乎没有调用 :hover CSS 伪类。

有没有人有幸做过这种性质的事情？

The :hover伪类不一定因其可靠性而闻名。另外，据我所知，没有办法通过 JavaScript 来控制其行为。

根据W3C 的规范 http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-mouseover, the :hover伪类仅应在以下情况下应用user发起行动。引用：

:hover 伪类适用于 用户指定一个元素（用 一些指点设备），但不 激活它。例如，视觉 用户代理可以应用这个 当光标（鼠标 指针）悬停在生成的框上 由元素。用户代理不 支持互动媒体不 必须支持这个伪类。

因此，在这种情况下，最好的方法是应用一个具体的类（比方说.hover）通过绑定到的函数mouseover and mouseout所需目标元素的事件。

顺便说一句，如果您要将标记重新构造为分层/嵌套形式，那么 DOM 会自动为您冒泡这些事件，您可能会省去很多麻烦。也就是说，请参阅此问题和答案，了解如何通过绝对定位的元素手动传播鼠标事件 https://stackoverflow.com/questions/1009753/pass-mouse-events-through-absolutely-positioned-element.