灯箱在用户悬停页面时触发

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>

灯箱在用户悬停页面时触发

Lightbox triggers when user hovers off page

jquery

lightbox