悬停时鼠标移动动画
Mousemove animate on hover
我想制作悬停在 div 上的动画。
但它不起作用，当我的鼠标在 div 之外时，动画不起作用。为什么？
https://jsfiddle.net/udn5b9fd/
$(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);
});
有几个修复程序，您应该申请：
- 从
hover 回调中删除第三个函数，因为它只有 2 个参数：Jquery Hover
- 更新每个处理程序中的所有属性：
opacity, height, width
- 将
pointer-events: none 样式添加到您的 span 元素，以防止当您的鼠标位于 span. 下时调用 hoverOut
查看示例了解更多详情：JSFiddle example
我想制作悬停在 div 上的动画。 但它不起作用，当我的鼠标在 div 之外时，动画不起作用。为什么？
https://jsfiddle.net/udn5b9fd/
$(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);
});
有几个修复程序，您应该申请：
- 从
hover回调中删除第三个函数，因为它只有 2 个参数：Jquery Hover - 更新每个处理程序中的所有属性：
opacity, height, width - 将
pointer-events: none样式添加到您的span元素，以防止当您的鼠标位于span. 下时调用
hoverOut
查看示例了解更多详情：JSFiddle example