Comment garder l'élément sous-jacent en stationnaire lorsque l'élément supérieur passe à travers

Question

J'ai une situation où certains div I survolent sur l'info-bulle des appels. Et j'ai une logique de repositionnement au cas où l'info-bulle ne correspondrait pas à l'écran. Mais j'ai été confronté à un problème (particulièrement dans FireFox): lorsque l'infobulle se déplace sur la div "caller", la div "caller" perd son état hover. Ceci est 100% reproductible dans FF, dans Chrome fonctionne sur certaines machines et sur certains ne fonctionne pas.

Y at-il une solution pour cela? J'ai créé jsfiddle pour le montrer. Vous verrez que l'animation est annulée - et oui je peux faire une solution de contournement dans un cas aussi simple, mais la situation est beaucoup plus complexe.

jsfiddle.net/5c1fdw6o/9/ 

Answer 1

Vous pouvez appliquer CSS: pointer-events: none; à la couche supérieure, pour cela.

Dans votre cas:

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

Answer 2

je recommande de commutation divs html de sorte que la durée serait au-dessus de l'autre div.

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

Si cela ne suffit pas, vous pouvez utiliser z-index sur les deux éléments pour vous assurer que div est toujours au-dessus de l'autre. Mais assurez-vous de positionner la durée comme relative.

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