CODEWITHSUNDEEP
javascriptfunctionmouseevent
alcoven
alcoven

Reputation: 321

Follow mouse on Hover of Div but only on Div

Not sure how to do this but I have the first part setup right via the codepen here Not sure how to stop it from occurring unless you hover the black div. Basically I'm looking to have the normal mouse functionality until you hover this black div than fire the script/function. I'm also trying to achieve this without using any libraries and just JS.

Code Below

document.addEventListener("mousemove", function() {
  myFunction(event);
});

var mouse;
var cursor = document.getElementById("cursor");

function myFunction(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
  cursor.style.left = (mouseX - 55) + "px";
  cursor.style.top = (mouseY - 55) + "px";


}
body {
  background: #FFFDFA;
}

#cursor {
  height: 100px;
  width: 100px;
  position: absolute;
  backface-visibility: hidden;
  z-index: 9999999;
  cursor: none;
}

div {
  background: black;
  width: 200px;
  height: 100px;
  margin: 30px;
  cursor: none;
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor"></img>

<div>
</div>

Upvotes: 0

Views: 1937

Answers (1)

Lemondoge
Lemondoge

Reputation: 989

You can simply add the event listener to the div element. You also need to disable pointerEvents on the cursor element so that the mouse doesn't register as on top of the cursor rather than the div.

document.getElementById("div").addEventListener("mousemove", function() {
  myFunction(event);
});

var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
  cursor.style.left = (mouseX - 55) + "px";
  cursor.style.top = (mouseY - 55) + "px";


}
body {
  background: #FFFDFA;
}

#cursor {
  height: 100px;
  width: 100px;
  position: absolute;
  backface-visibility: hidden;
  z-index: 9999999;
  pointer-events: none; /* pointer-events: none is needed */
  cursor: none;
}

div {
  background: black;
  width: 200px;
  height: 100px;
  margin: 30px;
  cursor: none;
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor"></img>

<div id="div"></div> <!--add id-->

EDIT: If you want the cursor to disappear on mouseout:

document.getElementById("div").addEventListener("mousemove", function() {
  myFunction(event);
});

var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
  cursor.style.left = (mouseX - 55) + "px";
  cursor.style.top = (mouseY - 55) + "px";
}
body {
  background: #FFFDFA;
}

#cursor {
  height: 100px;
  width: 100px;
  position: absolute;
  backface-visibility: hidden;
  z-index: 9999999;
  pointer-events: none; /* pointer-events: none is needed */
  cursor: none;
}

div {
  background: black;
  width: 200px;
  height: 100px;
  margin: 30px;
  cursor: none;
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor" hidden></img>

<div id="div" onmouseenter="cursor.hidden = false" onmouseleave="cursor.hidden=true"></div> <!--make cursor invisible on leave and visible on enter-->

Upvotes: 4

Related Questions