如何在上層元素通過時保持底層元素懸停

我有一些div我懸停在調用工具提示上。如果工具提示不適合屏幕，我會重新定位邏輯。但是我遇到了一個問題（尤其是在FireFox中），當工具提示移過「調用者」div時，「調用者」div放棄其懸停狀態。這在FF中是100％可重複的，Chrome在某些機器上工作，有些則不是。如何在上層元素通過時保持底層元素懸停

有沒有解決方案？我創造了jsfiddle來展示這一點。你會看到動畫被取消 - 是的，我可以在這樣一個簡單的情況下做一些解決方法，但回放情況要複雜得多。

jsfiddle.net/5c1fdw6o/9/

來源

2017-02-21 Vytautas Pranskunas

您可以將CSS：pointer-events: none;應用於頂層。

你的情況：

.sliding-tooltip { 
    pointer-events: none; 
}

來源

2017-02-21 12:25:38

謝謝，它hellped –

沒問題。如果它解決了您的問題，請考慮接受答案，以便將來可以幫助其他人。 –

我建議切換HTML的div這樣的跨度將是其他分區以上。

<div class="container"> 
    <div class="sliding-tooltip"> 
    I slide to the right 
    </div> 
    <span class="hover-item">Hover me!</span> 
</div>

如果這還不夠，你可以用兩個元素的z-index以確保格總是在另一個的上面。但請務必將相對跨度進行定位。

.hover-item { 
    color: blue; 
    position: relative; 
    z-index: 10; 
}

來源

2017-02-21 12:49:33

如何在上層元素通過時保持底層元素懸停

回答

相關問題