1 
<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');
           }   
    );
});

オンマウスオーバー私はdivを表示する必要があります。ただし、イベントを使用するとちらつきが発生します

4

1 に答える 1

0

あなたは間違いなくこれに答えたか、代替案を見つけたので、Googleからここにたどり着いた他の人にとっては、以下はちらつきなしで機能します（コードを機能させたり、ちらつきを作成したりできませんでした）。

コードで次のように置き換え$(this).siblings('.popupbox')ます$('.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>

完了すると、ちらつきもなく動作します - ここで作成したJSFIDDLEを参照してください。

于 2012-09-18T09:20:49.727 に答える