Question

以下是该方案：

您有两张图片，它们彼此堆叠在一起。最高级的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 psuedo-class。

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

Answer 1

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

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

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

所以，在这种情况下，你最好的方法是通过绑定到所需.hover和mouseover事件的函数来应用具体类（假设mouseout）目标要素。

顺便说一句，如果您要将标记重新构建为分层/嵌套形式，那么您可能会为自己省去很多麻烦，然后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。风格问题的风格解决方案。

调用：通过JavaScript传输事件来悬停伪类

2 个答案: