CODEWITHSUNDEEP
javascript
XLIME
XLIME

Reputation: 185

Snap a custom cursor back to the center of the mouse after a size increase?

I've got a custom cursor using some CSS - changes size on hover. What's the best way to snap the cursor back to the center of the mouse after the size increase?

Here's the fiddle: https://jsfiddle.net/fojn8bq9/

Here's the JavaScript I use to center the cursor initially:

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

What's the best way to fit ^it into my hover function?

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

Upvotes: 0

Views: 50

Answers (1)

dave
dave

Reputation: 64677

You can just move the circle by half the difference between the old and new heights/widths:

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

Upvotes: 1

Related Questions