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

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() {&nbsp; var img = $(this).find("figure");&nbsp; var offset = img.offset();&nbsp; var originLeft = offset.left;&nbsp; var originTop = offset.top;&nbsp; // only listen to move on this instance&nbsp; $(this).mousemove(function(e) {&nbsp; &nbsp; img.addClass('active').css({&nbsp; &nbsp; &nbsp; transform: 'translateX(' + (e.pageX - originLeft / 2) + 'px) translateY(' + (e.pageY+10&nbsp; - originTop) + 'px)'&nbsp; &nbsp; });&nbsp; })}).on('mouseleave', function() {&nbsp; // remove the mousemove listener&nbsp; $(this).off('mousemove').find("figure").removeClass('active').css({&nbsp; &nbsp; transform: 'translateX(0) translateY(0)'&nbsp; });});div {&nbsp; height: 150px;&nbsp; width: 150px;&nbsp; background: #eee;&nbsp; margin-bottom: 30px}div:nth-child(2) {&nbsp; background: #ccc;}figure {&nbsp; display: block;&nbsp; height: 50px;&nbsp; width: 50px;&nbsp; background: blue;&nbsp; margin: 0;&nbsp; transition: transform 500ms ease;}.active {&nbsp; transition: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; <figure></figure></div><div>&nbsp; <figure></figure></div>

Answer 2

您的问题在这一行：$('div').mousemove(function(e) {将其更改为：$(this).on('mousemove', function(e) {那是因为您需要解决每个循环中您所在的当前 div 元素：$('div').each(function() {片段：$('div').each(function() {&nbsp; var img = $(this).find( "figure" );&nbsp; var offset = img.offset();&nbsp; var originLeft = offset.left;&nbsp; var originTop = offset.top;&nbsp; $(this).on('mousemove', function(e) {&nbsp; &nbsp; &nbsp; img.addClass('active');&nbsp; &nbsp; &nbsp; img.css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: 'translateX(' + (e.pageX - originLeft/2 ) + 'px) translateY(' + (e.pageY - originTop) + 'px)'&nbsp; &nbsp; &nbsp; });&nbsp; }).on('mouseout', function(e) {&nbsp; &nbsp; &nbsp; img.removeClass('active');&nbsp; &nbsp; &nbsp; img.css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: 'translateX(0) translateY(0)'&nbsp; &nbsp; &nbsp; });&nbsp; });});div {&nbsp; &nbsp; height: 250px;&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; background: #eee;}div:nth-child(2) {&nbsp; &nbsp; background: #ccc;}figure {&nbsp; &nbsp; display: block;&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; width: 50px;&nbsp; &nbsp; background: blue;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; transition: transform 500ms ease;}.active {&nbsp; &nbsp; transition: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; &nbsp; <figure></figure></div><div>&nbsp; &nbsp; <figure></figure></div>