Блог

У меня есть пользовательский курсор, использующий некоторый CSS — изменяет размер при наведении. Каков наилучший способ привязать курсор обратно к центру мыши после увеличения размера?

Вот скрипка: https://jsfiddle.net/fojn8bq9 /

Вот 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';
  };
})();
 

Каков наилучший способ поместить его в мою функцию наведения?

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

Вы можете просто переместить круг на половину разницы между старой и новой высотой / шириной:

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