當用戶懸停頁面時燈箱觸發器

Question

我想請求幫助。我複製了一個從tonylea的簡單的lightbox彈出窗口。

當用戶懸停頁面時，我想觸發我的燈箱。目前它可以通過點擊觸發。

$('.lightbox').click(function(){ 
    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); 
    $('.box').animate({'opacity':'1.00'}, 300, 'linear'); 
    $('.backdrop, .box').css('display', 'block'); 
}); 

你有什麼建議如何做到這一點？

Answer 1

使用jQuery，您可以監視document上的mouseleave事件。

$(document).on('mouseleave', function() { 
 
    $('.backdrop, .box').animate({ 
 
    'opacity': '.50' 
 
    }, 300, 'linear'); 
 
    $('.box').animate({ 
 
    'opacity': '1.00' 
 
    }, 300, 'linear'); 
 
    $('.backdrop, .box').css('display', 'block'); 
 
    console.log('mouse left'); 
 
});

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