当光标不在父对象上方时隐藏鼠标悬停元素

Question

I have multiple inline-block elements on my project.

Each of these elements have a hidden "tooltip" which shows when you hover over them.

But this tooltip won't hide if cursor over it so, to see the tooltip of another element below you have first to move cursor away and back which is not much user friendly.

I have made an snippet to better show my problem. What I want is to hide the hover-element as soon as cursor not over red boxes.

I don't think there's a way with just CSS so any JavaScript/jQuery solution is very welcome.

 li { display: inline-block; background-color: red; width: 100px; height: 25px; margin-right: 10px; position: relative; } .hover-element { position: absolute; background-color: yellow; z-index: 9999; width: 350px; height: 175px; left: 50%; margin-left: -175px; top: 25px; display: none; } li:hover .hover-element { display: block; } 

 <ul> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> </ul> 

Answer 1

Add the visibility: hidden property on the .hover-element on hover.

 li { display:inline-block; background-color:red; width:100px; height:25px; margin-right:10px; position:relative; } .hover-element { position: absolute; background-color:yellow; z-index: 9999; width: 350px; height: 175px; left: 50%; margin-left: -175px; top:25px; display:none; } li:hover .hover-element { display:block; } .hover-element:hover { visibility: hidden; } 

 <ul> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> </ul> 

Answer 2

.hover-element {    
    pointer-events: none;
}

Answer 3

 li { display:inline-block; background-color:red; width:100px; height:25px; margin-right:10px; position:relative; } .hover-element { position: absolute; background-color:yellow; z-index: 9999; width: 350px; height: 175px; left: 50%; margin-left: -175px; top:25px; display:none; } li:hover .hover-element { display:block; } li .hover-element:hover { display:none; } 

 <ul> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> <li> <div class="hover-element"></div> </li> </ul>