[SOLVED] How to change cursor image when hovering above an image using Javascript or jQuery?

How to change cursor image when hovering above an image using Javascript or jQuery?

I am working on a task where when I hover on an image, I should get a custom cursor (150x150). I did some workarounds, but am unable to get a smooth hover.

CodePen: https://codepen.io/LeelaMathaiyan/pen/yLjgWjK

var mouseX = 0;
var mouseY = 0;

function getMousePosition(e) {
  var eObj = window.event ? window.event : e;
  mouseX = eObj.clientX;
  mouseY = eObj.clientY + document.documentElement.scrollTop;
}

function moveImg() {
  var m_x = parseInt(document.getElementById('badge1').style.left.replace('px', ''));
  var m_y = parseInt(document.getElementById('badge1').style.top.replace('px', ''));

  document.getElementById('badge1').style.left = Math.round(m_x + ((mouseX - m_x - 120) / 2)) + 'px';
  document.getElementById('badge1').style.top = Math.round(m_y + ((mouseY - m_y - 1005) / 2)) + 'px';
}

document.onmousemove = getMousePosition;
var moveInterval = setInterval("moveImg()", 10);

$(".article-thumbnail-div").mousemove(function(e) {
  // e.preventDefault();
  $(".badge1").addClass("on");
}).mouseout(function(e) {
  $('.badge1').removeClass("on");
  console.log("out");
});

.article-thumbnail-section {
  position: relative;
  min-height: 400px;
}

.article-thumbnail-section img {
  position: absolute;
}

.article-thumb-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.article-thumb-inner-sec {
  position: absolute;
  z-index: 999;
  height: 100%;
  width: 100%;
}

.article-thumbnail-div {
  position: absolute;
  width: 212px;
  cursor: pointer;
  z-index: 10;
  height: 226px;
}

.article-thumbnail-div img {
  z-index: 5;
}

.article-thumbnail-div:nth-child(1) {
  left: 0%;
}

.article-thumbnail-div:nth-child(2) {
  left: 27%;
}

.article-thumbnail-div:nth-child(3) {
  right: 27%;
}

.article-thumbnail-div:nth-child(4) {
  right: 0%;
}

.article-thumbnail-div.even {
  top: 20%;
}

.article-thumbnail-ellipse {
  top: 50%;
}

.article-thumbnail-ellipse:nth-child(1) {
  left: -90px;
}

.article-thumbnail-ellipse:nth-child(2) {
  left: 22%;
}

.article-thumbnail-ellipse:nth-child(3) {
  right: 20%;

}

.article-thumbnail-ellipse:nth-child(4) {
  right: -90px;
}

.article-thumbnail-ellipse.odd {
  top: 10%;
}

.article-thumbnail-ellipse.even {
  top: -2%;
}

.article-thumbnail-section .article-thumb-inner-sec .img {}

#badge1 {
  position: absolute;
  width: 150px;
  height: 150px;
  background: url('https://3boysandadog.com/wp-content/uploads/2014/09/icon_circle_150x150.png') no-repeat;
  display: none;
  z-index: 250;
}

#badge1.on {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="article-thumbnail-section">
  <div class="">
    <img src="../assets/images/thumbnail-bg1.svg" class="card_bg11 article-thumbnail-ellipse odd">
    <img src="../assets/images/thumbnail-bg2.svg" class="card_bg12 article-thumbnail-ellipse even">
    <img src="../assets/images/thumbnail-bg3.svg" class="card_bg13 article-thumbnail-ellipse odd">
    <img src="../assets/images/thumbnail-bg4.svg" class="card_bg14 article-thumbnail-ellipse even">
  </div>
  <div class="article-thumb-inner">
    <div class="article-thumb-inner-sec">
      <div class=" article-thumbnail-div odd"><img src="https://vignette1.wikia.nocookie.net/cityville/images/5/58/Viral_basketballcomplex_basketball_200x200.png/revision/latest?cb=20130613014636" class="lazyload card-img-top article-thumbnail-img" alt="Period 101" /></div>
      <div class=" article-thumbnail-div even"><img src="https://vignette1.wikia.nocookie.net/cityville/images/5/58/Viral_basketballcomplex_basketball_200x200.png/revision/latest?cb=20130613014636" class="lazyload card-img-top article-thumbnail-img" alt="My First Period" /></div>
      <div class=" article-thumbnail-div odd"><img src="https://vignette1.wikia.nocookie.net/cityville/images/5/58/Viral_basketballcomplex_basketball_200x200.png/revision/latest?cb=20130613014636"  class="lazyload card-img-top article-thumbnail-img" alt="Period Hacks" /></div>
      <div class=" article-thumbnail-div even"><img src="https://vignette1.wikia.nocookie.net/cityville/images/5/58/Viral_basketballcomplex_basketball_200x200.png/revision/latest?cb=20130613014636"  class="lazyload card-img-top article-thumbnail-img" alt="My First Period" /></div>
      <div id="badge1" class="badge1" style="left:0px; top: 0px;"></div>
    </div>
  </div>
</div>

Sample screenshot on hovering an image using image cursor:

Solution

You can do it without JS, just set:

.class {
    cursor: url('components/assets/decorations/Pointer.png'), auto;
}

in your CSS.

Of course, if you need to do it dynamically, you can use the style tag.