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

Question

这是场景：

您有两张图片，它们相互堆叠。最高阶的 z-indexed 图像负责处理点击事件（想想 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 psuedo-class。

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

Answer 1

:hover 伪类不一定以其可靠性而闻名。此外，没有办法（据我所知）通过 Javascript 控制其行为。

根据W3C's spec，:hover 伪类只应在用户 启动操作时应用。引用：

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

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

顺便说一句，如果您将标记重新构建为分层/嵌套形式，您可能会省去很多麻烦，然后 DOM 会自动为您冒泡这些事件。也就是说，see this SO question and answer on how to manually propagate mouse events through absolutely positioned elements。

Answer 2

Jason 的元素嵌套评论启发了这一点：

<style type="text/css">
div.visual-container {
    width: 10px;
    height: 10px;
}

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

div.click-container {
    width: 10px;
    height: 10px;
}
</style>
...
<div class="widget-container">
  <div class='lowest'>
    <div class='visual-container'></div>
  </div>
  <div class='highest'>
    <div class='click-container'></div>
  </div>
</div>

这可能是 Jason 暗示的解决方案。正如他所说，DOM 不能让您控制伪类，但您不需要 DOM。风格问题的风格解决方案。