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

Question

我想请求帮助。我复制了一个来自tonylea的简单灯箱弹出窗口。

我想在用户徘徊在页面外时触发灯箱。目前，它可以通过点击触发。

$('.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，您可以监控mouseleave上的document事件。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;