調用：由通過JavaScript

Question

這裏轉移事件hover僞類是場景：

您有兩個圖像並將其堆放在彼此。最高階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); 
}; 

這部分是好的，事件因此轉移，但它似乎並沒有調用：懸停的CSS僞類。

有沒有人有過這種性質的東西運氣？

Answer 1

:hover僞類不一定以其可靠性而聞名。此外，沒有辦法（我知道）通過Javascript來控制其行爲。

根據該W3C's spec，所述:hover僞類只應當用戶啓動一個動作施加。引用：

：hover僞類適用而 用戶指定的元件（與 一些指示設備），但不 激活它。例如，當光標（鼠標 指針）懸停在元素生成的 框上時，視覺 用戶代理可以應用此僞類。用戶代理不支持 交互媒體不支持 必須支持這個僞類。

所以，你最好的最好的，在這種情況下，將採用一個具體的類（比方說.hover）通過綁定到所需的目標元素的mouseover和mouseout事件的功能。另外，如果要將標記重新構建爲層次結構/嵌套表單，則可能會爲自己節省很多麻煩，然後DOM會自動爲您啓動這些事件。這就是說，see this SO question and answer on how to manually propagate mouse events through absolutely positioned elements。

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> 

這可能是解決傑森在暗示什麼。正如他所說的，DOM不會讓你控制僞類，但是你不需要這個DOM。 style-y問題的解決方案。