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

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的规范,:hover只应在用户启动操作时应用伪类.引用:

:hover伪类适用于用户指定元素(带有一些指点设备),但不激活它.例如,当光标(鼠标指针)悬停在元素生成的框上时,可视用户代理可以应用此伪类.不支持交互式媒体的用户代理不必支持此伪类.

因此,在这种情况下,最好的方法是.hover通过绑定到所需目标元素mouseover和mouseout事件的函数来应用具体类(比方说).

顺便说一句,如果你要将标记重新构建为分层/嵌套形式,那么你可能会为自己省去很多麻烦,然后DOM会自动为你冒泡这些事件.也就是说,请参阅此SO问题并回答如何通过绝对定位的元素手动传播鼠标事件.