鼠标悬停动画答案

【问题标题】：Mousemove animate on hover鼠标悬停动画
【发布时间】：2016-12-07 21:34:31
【问题描述】：

我想让动画悬停在 div 上。但它不起作用，当我的鼠标在 div 之外时，动画不起作用。为什么？

$(document).mousemove(function(e){
$("span").css({left:e.pageX - 50, top:e.pageY - 50});
});


$("div").hover(

  function() {
  $("span").stop().animate({"height": "100px", "width": "100px"}, 200);
  },
  function() {
  $(this).stop().animate({"opacity": "0.5"}, 0);
  },
  function() {
  $(this).stop().animate({"opacity": "1"}, 0);

});

【问题讨论】：

您不能在悬停声明中包含三个函数，一个用于输入，一个用于输出...。预期的行为是什么？当跨度增大时，div 上的悬停为空。

标签： javascript jquery css hover mousemove

【解决方案1】：

有几个修复，你应该申请：

从hover 回调中删除第三个函数，因为它只有两个参数：Jquery Hover
更新每个处理程序中的所有属性：opacity, height, width
将pointer-events: none 样式添加到您的span 元素，以防止当您的鼠标在span 下方时调用hoverOut。

查看示例了解更多详情：JSFiddle example

【讨论】：