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

Posted 2023-03-05

【中文标题】通过 JavaScript 传输事件来调用 :hover 伪类

【英文标题】：Invoking :hover pseudo-class by transferring events via JavaScript

【发布时间】：2010-11-19 23:06:23

【问题描述】：

这是场景：

您有两张图片，它们相互堆叠。最高阶的 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。

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

【问题讨论】：

究竟是什么不调用:hover？将鼠标悬停在最顶层的元素上？还是您希望它传播到最底层？另外，您是否遇到了特定的浏览器问题？

创建一个 DOM 事件 'mouseover' 并在所需元素上调用它不会调用该元素的 :hover CSS 伪类。没有特定的浏览器。

所以，是的，基本上它并没有按照我想要的方式传播。它会调用 mouseover 事件，但不会调用 :hover。

【参考方案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。

【参考方案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。风格问题的风格解决方案。

【讨论】：

是的，这是处理它的一种方法。但是，我真正想到的是，如果你在 click-container 中添加 visual-container，他就不必像他一样手动传播所有 DOM 事件——而且 :hover 仍然可以工作。跨度>

是的，那条评论减去了错别字。 :)