隱藏懸停元素時光標不超過父

我有我的項目多inline-block元素。隱藏懸停元素時光標不超過父

每個元素有一個隱藏的「提示」，當你將鼠標懸停在他們這表明。

但這種提示不會隱藏，如果光標放在它的話，看到另一個元素的工具提示下面你必須先移動光標離開並返回這是沒有太大的用戶友好。

我做了一個片段，以更好地展示我的問題。我想要的是隻要光標不在紅框上就隱藏hover-element。

我不認爲有隻CSS的方式，因此任何的JavaScript/jQuery的解決方案是非常歡迎的。

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>

來源

2017-09-13 Alvaro Menéndez

將用戶需要與工具提示內容進行交互？想知道會點擊揭示工具提示比您的情況下懸停更方便嗎？ – sol

沒有。沒有互動。這就是我使用懸停的原因。 ty –

在.hover-element添加visibility: hidden財產上徘徊。

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>

來源

2017-09-13 11:56:28

Ty。今天我沒有想到罷工。我應該有解決它自己:)會給你更多的4分鐘內信貸爲你的答案是第 –

@AlvaroMenéndez沒問題:)有時CSS得到棘手 –

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

來源

2017-09-13 11:58:32 Ivan

泰。這也適用，但必須給第一篇文章「正確答案」。 –

解決方案是不同的，但是這取決於你 – Ivan

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>

來源

2017-09-13 12:00:41

Ty。這也適用，但必須給第一篇文章「正確答案」。 –

好。我遲到了 –

隱藏懸停元素時光標不超過父

回答

相關問題