调用：通过JavaScript传递事件的hover伪类 [英] Invoking :hover pseudo-class by transferring events via JavaScript

问题描述

以下是场景：

您有两个图像，它们彼此堆叠。最高阶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）; 
}; 
  

这部分很好，并且相应地传输事件，但是它似乎没有调用

有任何人有运气这样做的东西吗？

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

按照 W3C规范，：hover 伪类只应在用户启动行动。引用：

：hover伪类应用
用户指定一个元素（带
一些定点设备），但不会
激活它。例如，当光标（鼠标
指针）悬停在由元素生成的
框上时，视觉
用户代理可以应用此
伪类。用户代理不是
支持交互式媒体不要
不得不支持这个伪类。

最好的，在这种情况下，将通过绑定到 mouseover 的函数应用一个具体类（我们说 .hover $ c>和 mouseout 所需目标元素的事件。

很多麻烦，如果你重新将你的标记结构成一个分层/嵌套的形式，然后DOM会自动为你的泡沫这些事件。也就是说，看到这个问题，并回答如何手动传播鼠标事件通过绝对定位元素。

Here is the scenario:

You have two images and they are stacked on one another. The highest-order z-indexed image is responsible for handling click events (think Google's Map API) and is transparent, while the image below is responsible for a visual representation.

Here is a pseudo-HTML/CSS representation:

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>

Now, when the 'highest' element is clicked, the event is dispatched also on the 'lowest' element.

The basic idea:

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

This part is fine and transfers the event accordingly, but it does not seem to invoke the :hover CSS psuedo-class.

Has anyone had any luck with doing something of this nature?

解决方案

The :hover pseudo-class is not necessarily known for its reliability. Also, there's no way (that I know of) to control its behaviour via Javascript.

According to the W3C's spec, the :hover pseudo-class should only be applied when the user initiates the action. Quote:

The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class.

So, your best best, in this situation, would be to apply a concrete class (let's say .hover) via a function bound to the mouseover and mouseout events of the desired target elements.

As an aside, you could probably save yourself a lot of hassle if you were to re-structure your markup into a hierarchical/nested form, then the DOM would automatically bubble these events for you. That said, see this SO question and answer on how to manually propagate mouse events through absolutely positioned elements.

这篇关于调用：通过JavaScript传递事件的hover伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！