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

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>