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>