jQuery .show（）/ .hide（）が点滅し続ける

Question

#triangleにカーソルを合わせると、＃tri-overlayが表示されますが、cssの "display：none"と競合しているために点滅し続けます。彼は「表示：なし」から「表示：ブロック」へと変化し続け、ちらつき効果を引き起こす。この矛盾を避けるにはどうすればいいですか？

私は以下のコードを使用しています。

$(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>