CODEWITHSUNDEEP
javascripthtmlcss
Andreas Kaminarides
Andreas Kaminarides

Reputation: 23

Cursor changer effect

I am having trouble changing my custom cursor width and height when I hover on the img element.

I tried using both css and javascript for the effect to work but it won't. When I change my function from "onmouseover" to "onclick" it works perfectly fine.

const cursor = document.querySelector('#cursor');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + (e.clientY - 10) + "px; left: " + (e.clientX - 10) + "px;")
})

/*
            /////Second way with javascript/////
            
            var cursor = document.getElementById('cursor');
            document.addEventListener('mousemove', function(e){
                var x = e.clientX;
                var y = e.clientY;
                cursor.style.left= x + "px";
                cursor.style.top= y + "px";
            });
            */
function myFunction() {
  document.getElementById("cursor").style.width = "100px";
  document.getElementById("cursor").style.height = "100px";
}
body {
  margin: 0;
  height: 100vh;
  background: rgb(27, 27, 27);
}

#cursor {
  width: 30px;
  height: 30px;
  border: 2px solid gray;
  border-radius: 50%;
  position: fixed;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
}

img:hover #cursor {
  width: 100px;
  height: 100px;
}
<div id="cursor"></div>
<a href="../"><img onmouseover="myFunction()" src="navbar.svg" alt="navbar"></a>

Upvotes: 0

Views: 91

Answers (2)

mplungjan
mplungjan

Reputation: 177960

How about this class toggle. Works.

Always preferable to use addEventListener everywhere

const cursor = document.querySelector('#cursor');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + (e.clientY - 10) + "px; left: " + (e.clientX - 10) + "px;")
})
const hoverIt = e => cursor.classList.toggle("hover");

document.getElementById("navbarimg").addEventListener("mouseover",hoverIt);
document.getElementById("navbarimg").addEventListener("mouseover",hoverIt);
#cursor {
  width: 30px;
  height: 30px;
  border: 2px solid gray;
  border-radius: 50%;
  position: fixed;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor.hover {
  width: 100px;
  height: 100px;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
}

img:hover #cursor {
  width: 100px;
  height: 100px;
}
<div id="cursor"></div>
<a href="../"><img id="navbarimg" src="navbar.svg" alt="navbar"></a>

Upvotes: 1

alasdair009
alasdair009

Reputation: 95

So the css solution here will not work as the #cursor is not a child of the img. You could have it a child of the anchor but that is probably the wrong approach anyway as it is not extendable.

You should probably change the logic to use an eventListener for simplicity...

document.getElementById("testImg").addEventListener("mouseover", function( event ) {
   alert("over"); // Do your resizing here and ensure the image has the matching id
})

Upvotes: 0

Related Questions