尺寸增加后將自定義 cursor 捕捉回鼠標中心？

Question

我有一個自定義 cursor 使用一些 CSS - 在 hover 上更改大小。 尺寸增加后，將 cursor 卡回鼠標中心的最佳方法是什么？

這是小提琴： https://jsfiddle.net/fojn8bq9/

這是我最初用來將 cursor 居中的 JavaScript：

const w = myCircle.offsetWidth / 2;
const h = myCircle.offsetHeight / 2;

const myMouse = new (function() {
  this.follow = function(event) {
    myCircle.style.left = event.pageX - w + 'px';
    myCircle.style.top = event.pageY - h + 'px';
  };
})();

將 ^it 裝入我的 hover function 的最佳方法是什么？

$(document).ready(function(){
  $("button").hover(function(){
    $(myCircle).css({"height":"50px", "width":"50px"});
  }, function(){
    $(myCircle).css({"height":"25px", "width":"25px"});
  });
});

Answer 1

您可以將圓移動新舊高度/寬度之間差異的一半：

 $("button").hover(function(){ $(myCircle).css({"height":"50px", "width":"50px", transform: "translate(-12.5px, -12.5px)"}); }, function(){ $(myCircle).css({"height":"25px", "width":"25px", transform: ""}); }); });