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

你现在无疑已经回答了这个问题，或者找到了替代方案，所以对于那些从谷歌来到这里的人来说，以下内容将无闪烁（我无法让你的代码工作或创建闪烁）

在您的代码中，将$(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。

mouseover- mouseout / hover / moudeenter-mouseleaves使闪烁

1 个答案: