附加到光标然后返回到原始位置

Question

我试图让鼠标悬停在 div 上时，该 div 的子级会附加到光标上，当您离开 div 时，子级会返回到其原始位置。

这是我到目前为止所拥有的：

 $('div').each(function() { var img = $(this).find( "figure" ); var offset = img.offset(); var originLeft = offset.left; var originTop = offset.top; $('div').mousemove(function(e) { img.addClass('active'); img.css({ transform: 'translateX(' + (e.pageX - originLeft/2 ) + 'px) translateY(' + (e.pageY - originTop) + 'px)' }); }).mouseleave(function() { img.removeClass('active'); img.css({ transform: 'translateX(0) translateY(0)' }); }); });

 div { height: 250px; width: 250px; background: #eee; } div:nth-child(2) { background: #ccc; } figure { display: block; height: 50px; width: 50px; background: blue; margin: 0; transition: transform 500ms ease; } .active { transition: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <figure></figure> </div> <div> <figure></figure> </div>

问题是，如果页面上有多个，则它不起作用，而且 mouseleave 事件似乎有问题：有时需要一秒钟或在返回原始位置之前有一些闪烁。

Answer 1

使用 mouseenter 添加 mousemove 侦听器并在 mouseleave 中删除它可以解决大部分问题。 另一部分是，如果图像离开容器时直接在鼠标下方，则鼠标仍然在 child 之上。

为相对于鼠标的图像位置添加一些额外的偏移量有助于消除其余的错误

 $('div').on('mouseenter', function() { var img = $(this).find("figure"); var offset = img.offset(); var originLeft = offset.left; var originTop = offset.top; // only listen to move on this instance $(this).mousemove(function(e) { img.addClass('active').css({ transform: 'translateX(' + (e.pageX - originLeft / 2) + 'px) translateY(' + (e.pageY+10 - originTop) + 'px)' }); }) }).on('mouseleave', function() { // remove the mousemove listener $(this).off('mousemove').find("figure").removeClass('active').css({ transform: 'translateX(0) translateY(0)' }); });

 div { height: 150px; width: 150px; background: #eee; margin-bottom: 30px } div:nth-child(2) { background: #ccc; } figure { display: block; height: 50px; width: 50px; background: blue; margin: 0; transition: transform 500ms ease; } .active { transition: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <figure></figure> </div> <div> <figure></figure> </div>

Answer 2

您的问题在这一行：

$('div').mousemove(function(e) {

将其更改为：

$(this).on('mousemove', function(e) {

那是因为您需要解决您在每个循环中所在的当前 div 元素：

$('div').each(function() {

片段：

 $('div').each(function() { var img = $(this).find( "figure" ); var offset = img.offset(); var originLeft = offset.left; var originTop = offset.top; $(this).on('mousemove', function(e) { img.addClass('active'); img.css({ transform: 'translateX(' + (e.pageX - originLeft/2 ) + 'px) translateY(' + (e.pageY - originTop) + 'px)' }); }).on('mouseout', function(e) { img.removeClass('active'); img.css({ transform: 'translateX(0) translateY(0)' }); }); });

 div { height: 250px; width: 250px; background: #eee; } div:nth-child(2) { background: #ccc; } figure { display: block; height: 50px; width: 50px; background: blue; margin: 0; transition: transform 500ms ease; } .active { transition: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <figure></figure> </div> <div> <figure></figure> </div>