mouseover-mouseout/hover/moudeenter-mouseleavesがちらつきになる

Question

<div id="risk-free-logo" style="float:left;margin-left:30px;height:100px;width:100px"> 
     </div> 
<div id="risk-free-info-div" style="border: 2px solid; display:none; position: relative; background-color: rgb(255, 255, 255); z-index:   100; height: 170px; width: 300px; margin-left: 150px;" class="popupbox"></div> 

$(document).ready(function(){ 
$('#risk-free-logo').mouseenter(
    function(){ 
      $(this).siblings('.popupbox').css('display','block'); 
       }); 
    $('#risk-free-logo').mouseleave(
     function(){ 
     $(this).siblings('.popupbox').css('display','none'); 
      } 
    ); 
}); 

Onmouseover divを表示する必要があります。しかし、任意のイベントを使用するとちらつきが発生します

Answer 1

あなたは間違いなくこれまでにこれに答えているか、代替案を見つけているので、ここからGoogleで終わる他の人には、フリッカーフリーです作業またはちらつきを作成するコード）。私はここで作成JSFIDDLEを参照してください - それは無ちらつきと連携して行われます一度、あなたのコードで

は$('.popupbox')

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 
$("#risk-free-logo").mouseenter(function (event) { 
    $('.popupbox').css('display','block'); 
}); 
$("#risk-free-logo").mouseout(function (event) { 
    $('.popupbox').css('display',''); 
}); 
</script> 

<style> 
#risk-free-logo {border: 2px solid red; float:left;margin-left:30px;height:100px;width:100px; } 
#risk-free-info-div {border: 2px solid; display:none; position: relative; background-color: rgb(255, 255, 255); z-index:100; height: 170px; width: 300px; margin-left: 150px; } 
</style> 

<div id="risk-free-logo">Mousenter me to display...</div> 
<div id="risk-free-info-div" class="popupbox">...my friend over here</div> 

で$(this).siblings('.popupbox')を交換してください。