javascript - 悬停时特殊光标更改

Question

我有一个函数可以创建一个大圆圈，只有当光标悬停在 QrCide__Section 时才想激活它……我对编码还很陌生。我认为使用mouseover可能有效，但我们可以将事件堆叠在一起吗？

我包含了这部分的所有必要代码。

html:

<div class="QrCode__Section">
    <div class="cursor"></div>
    <div class="QrCode__Img">
                <h3>Find the QR code for the spotify playlist</h3>
        <div id="qrcode">
            <img id="QRCode" src="img/qr-code.png" alt="">
        </div>
    </div>
</div>

CSS：

.cursor {
    position: absolute;
    width: 250px;
    height: 250px;
    top: -50%;
    left: -50%;
    margin: -125px 0 0 -125px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.8s ease-out;
    mix-blend-mode: difference;
        filter: grayscale(2);
    pointer-events: none;
  }

.cursor.is-moving {
    transform: scale (0.8);
}

JS：

var $cursor = $('.cursor');

function moveCursor(e) {
  $cursor.addClass('is-moving');
  $cursor.css({"top": e.pageY, "left": e.pageX});

  clearTimeout(timer2);

   var timer2 = setTimeout(function() {
       $cursor.removeClass('is-moving');
   }, 300);
}

$(window).on('mousemove', moveCursor);

标签： javascriptjquerycsseventsjquery-events