调用：通过JavaScript传递事件来悬停伪类 [英] 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 ='最低'> 
< div class ='visual-container'>< / div> 
< / div> 
 
< div class ='highest'> 
< div class ='click-container'>< / div> 
< / div> 
  

现在，当单击最高元素时，事件也会在最低元素

基本思想：

  function onHoverEventForHighest（）{ 
 createMouseEvent（minimum_element，'mouseover'，event）; 
}; 
  

这部分是正常的，并相应地转移事件，但似乎没有调用有没有人能做这样的事情呢？

解决方案

伪元素的可靠性并不一定是知道的。另外，我没有办法通过Javascript来控制它的行为。

根据 W3C的规范，只有当用户启动时，：hover 伪类才应用行动。引用：

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

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

除此之外，您可能会保存自己如果您要将您的标记重新构建成层次结构/嵌套形式，那么很多麻烦，那么DOM会自动为您启动这些事件。也就是说，看到这个SO问题和答案如何手动传播鼠标事件绝对定位元素。

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传递事件来悬停伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！