javascript - 悬停弹出窗口如此快速地闪烁

Question

我在悬停时创建了一个弹出窗口，但它闪烁得非常快。我也尝试应用超时、延迟功能，但没有成功。也许我做错了。

$(document).on('mouseout', '.lash-opt', function(){
    $('#hover-popup').css({display: 'none'});
});

$(document).on('mouseover', ' .lash-opt', function() {
    $('#hover-popup').css({display: 'block'});
});

.lash-opt img{
    width:100px;
    height:100px;
    border:2px solid black;
}
#hover-popup{
    display:none;
}
#hover-popup img{
    width:100px;
    height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="lash-opt-container"><input id="lash-base-url" type="hidden" value="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSayqdJ-F4wF8rxhaC1XMBglgXLVeR30A3NyOLG7bDSNTlcyOSI" />
 
 
<span id="style-no-pictures-please" class="lash-opt">
    <img src="http://www.ikea.com/PIAimages/0417314_PE579390_S5.JPG" />
     <label>3</label>
    </span>
</div>

<div id="hover-popup">
    <img id="hover-popup-img" src="http://www.ikea.com/gb/en/images/products/kalas-mug-assorted-colours__0145357_pe304804_s5.jpg" />
    <p>The Perfect basic for the non-basic. Our most popular style, these versatile lashes follow and amplify the natural length of your lashes for an everyday natural look.</p>
</div>

Answer 1

使用 fadeIn() 和 fadeOut() 而不是 display: none 和 display: block 你可以使用delay()设置fadeOut前的延迟时间。

$(document).on('mouseout', '.lash-opt', function() {
  $('#hover-popup').delay(1000).fadeOut(500);
//Set delay time -----------^

//Set transition time--------------------^
});

$(document).on('mouseout', '.lash-opt', function() {
  $('#hover-popup').delay(1000).fadeOut(500);
});
$(document).on('mouseover', ' .lash-opt', function() {
  $('#hover-popup').fadeIn(500);
});

.lash-opt img {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

#hover-popup {
  display: none;
}

#hover-popup img {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="lash-opt-container"><input id="lash-base-url" type="hidden" value="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSayqdJ-F4wF8rxhaC1XMBglgXLVeR30A3NyOLG7bDSNTlcyOSI" />




  <span id="style-no-pictures-please" class="lash-opt"><img src="http://www.ikea.com/PIAimages/0417314_PE579390_S5.JPG" /> <label>3</label></div>

    </span>



  <div id="hover-popup"><img id="hover-popup-img" src="http://www.ikea.com/gb/en/images/products/kalas-mug-assorted-colours__0145357_pe304804_s5.jpg" />
    <p>The Perfect basic for the non-basic. Our most popular style, these versatile lashes follow and amplify the natural length of your lashes for an everyday natural look.</p>
  </div>
</div>