通過JavaScript傳輸事件來調用：hover偽類

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偽類在用戶指定元素（使用某些定點設備）時適用，但不激活它。 例如，當光標（鼠標指針）懸停在由元素生成的框上時，可視用戶代理可以應用此偽類。 不支持交互式媒體的用戶代理不必支持此偽類。

因此，在這種情況下，最好的辦法是通過綁定到所需目標元素的mouseover和mouseout事件的函數來應用具體類（例如.hover ）。

順便說一句，如果要將標記重新構造為分層/嵌套形式，則可能會節省很多麻煩，然后DOM會自動為您冒泡這些事件。 也就是說， 有關如何通過絕對定位的元素手動傳播鼠標事件的信息 ， 請參見SO問答 。

Answer 2

傑森的元素嵌套評論啟發了這一點：

<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。 Y型問題的Y型解決方案。