鍍金池/ 問答/HTML/ hover時顯示div，此時點擊div，大概率導(dǎo)致hover失效，div消失。請

hover時顯示div，此時點擊div，大概率導(dǎo)致hover失效，div消失。請問如何解決？

dom如下：

<li>
    <a href="javascript:;" title=""></a>
    <div class="pop">隱藏的div</div>
</li>

css如下：

.pop {
    display: none;
    position: absolute;
}
li {
    position: relative;
}
li:hover {
    .pop {
        display: block;
    }
}

chrome 下：
當(dāng) hover li 時，顯示 div.pop，此時多次點擊 div.pop（并非連續(xù)快速點擊，而是很隨意的點擊），就有可能導(dǎo)致該 div 消失。

注明：該div內(nèi)有個輪播，點擊內(nèi)部的箭頭，有滑動效果。

個人猜測：
1、click 時導(dǎo)致鼠標失去了焦點，hover失效。
2、click 具有 css3 屬性的元素時，會導(dǎo)致 hover 失效。

這個 bug 頭痛萬分，有沒有大神能解答一下，給個解決方案呢？謝謝！

回答
編輯回答
蔚藍色

我也遇到同樣問題，請問樓主解決了嗎?

2017年5月30日 17:10
編輯回答
網(wǎng)妓

添加參數(shù)使hover事件和click時間隔離
var isMouseOver = true; //控制鼠標hover事件和click事件的沖突

$(".div").hover(function(){
    isMouseOver = true
    //程序處理邏輯
},function(){
    if(isMouseOver){
        //程序處理邏輯
    }
});
$(".div").click(function(){
isMouseOver = false;
//程序處理邏輯

});

2017年6月13日 02:46
編輯回答
背叛者

用js來控制顯示隱藏，在父級元素 li加上onmouseover和onmouseout函數(shù)
隱藏的DIV 你自己控制點擊函數(shù)

<style>

.pop {
    display: none;
    position: absolute;
}
li {
    position: relative;
}
/*li:hover .pop {*/
    /*display: block;*/
/*}*/

</style>
<body>

<li onmouseover="show()" onmouseout="hide()">
    <a href="javascript:;" title=""></a>
    <div class="pop" id="pop"  onclick="check()">
        隱藏的div
    </div>
</li>

</body>
<script>

var i=0
function show() {
    document.getElementById('pop').style.display = 'block'
}
function hide() {
    document.getElementById('pop').style.display = 'none'
}
function check(){
    console.log('點擊了' + i++)
}

</script>

圖片描述

2017年8月18日 19:56