jQuery .show（）/ .hide（）保持閃爍

Question

當我懸停#triangle時，＃tri-overlay會顯示，但會持續閃爍，因爲它與css中的「display：none」有衝突。他一直從「display：none」轉到「display：block」，導致閃爍效果。我怎樣才能避免這種衝突？

我使用的是下面的代碼。

$(function() { 
 
    $('#triangle').hover(function() { 
 
    $('#tri-overlay').show(); 
 
    }, function() { 
 
    $('#tri-overlay').hide(); 
 
    }); 
 
});

.slide-des { 
 
    width: 50%; 
 
    height: 50%; 
 
} 
 
#triangle { 
 
    width: 12em; 
 
    height: 10em; 
 
    position: relative; 
 
    background: red; 
 
    display: block; 
 
} 
 
#tri-overlay { 
 
    background: green; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="tri-overlay" style="display: none;"></div> 
 
<div class="slide-des"> 
 
    <div id="triangle"></div> 
 
</div>

Answer 1

停止覆蓋與CSS鼠標交互：

#tri-overlay{ 
    pointer-events: none; 
} 

當一個元素鼠標下出現，一些瀏覽器會立即說剛離開一個元素在鼠標下。

參考：https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

借用射手佈局示例：

$("#element2").hover(function() { 
 
    $("#element2-overlay").show(); 
 
    }, 
 
    function() { 
 
    $("#element2-overlay").hide(); 
 
});

#element2 { 
 
    background-color: green; 
 
} 
 
#element2-overlay { 
 
    pointer-events: none; 
 
    background-color: yellow; 
 
    display: none; 
 
} 
 

 
.example { 
 
    height: 100px; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100px; 
 
} 
 
.example2 { 
 
    left: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="element2" class="example example2"></div> 
 
<div id="element2-overlay" class="example example2"></div>