Javascript style.display not working and is overwritten by css?-CodePudding

I am trying to get a javascript code to trigger, that when the mouse enters a div it replaces the mouse with a tracked gif that is attached to a div. The code for doesn't work for some reason as soon as I tell the img element to be display:none; to prevent it from appearing when you refresh the page. It seems like the css code somehow overwrites the javascript?

How do I get this to work? Link to codepen

<div id="cursor">
<div id="next--cursor"> <img src="https://media2.giphy.com/media/RgbTzGW9IIRHcUWxOJ/giphy.gif? 
cid=790b76114e5bfc8443de9eee9b628a5f3abf8c7781fb2c35&rid=giphy.gif&ct=s"> </div>
<div id="prev--cursor"> <img src="https://media3.giphy.com/media/QvBKLx9rJwYhfvb5kE/giphy.gif? 
cid=790b761175a201200752f42876262319b308809adaf9f4eb&rid=giphy.gif&ct=s"> </div>
</div>

<div id="left" data-hover="Prev"></div>
<div id="right"  data-hover="next"></div>

CSS

 #cursor div img {
 width:120px;
 height:Auto;
 position:absolute;
 z-index:500;
 display:block;

   const cursor = document.querySelector("#cursor");
   var   prevgif = document.getElementById("prev--cursor"),
   nextgif = document.getElementById("next--cursor"),
   leftzone = document.getElementById("left"),
   rightzone = document.getElementById("right");

  document.addEventListener("mousemove", function(event) {
  const x = event.pageX - 10;
  const y = event.pageY - 10;

  cursor.style.left = x   "px";
  cursor.style.top = y   "px";
  });


 leftzone.addEventListener("mouseover", () => {
 prevgif.style.display = "block";
    })
 leftzone.addEventListener("mouseout", () => {
        prevgif.style.display = "none";
    });

 rightzone.addEventListener("mouseover", () => {
        nextgif.style.display = "block";
         nextgif.style.opacity = "1";
    })
  rightzone.addEventListener("mouseout", () => {
        nextgif.style.display = "none";
    });

CodePudding user response：

Solved it. You are changing display property of images inside #cursor but then you are changing display property of #cursor element leaving those images intact. You are just referencing incorrect DOM elements.

The only thing you need to change is the code below.
This:

var   prevgif = document.getElementById("prev--cursor"),
      nextgif = document.getElementById("next--cursor"),
      leftzone = document.getElementById("left"),
      rightzone = document.getElementById("right");

To that:

  var   prevgif = document.querySelector("#prev--cursor img"),
        nextgif = document.querySelector("#next--cursor img"),
        leftzone = document.getElementById("left"),
        rightzone = document.getElementById("right");

Please find the code snippet below with working implementation.

Please notice that it's not responsive so it might look strange in a code snippet.

  const cursor = document.querySelector("#cursor");
  var   prevgif = document.querySelector("#prev--cursor img"),
        nextgif = document.querySelector("#next--cursor img"),
        leftzone = document.getElementById("left"),
        rightzone = document.getElementById("right");

document.addEventListener("mousemove", function(event) {
  const x = event.pageX - 10;
  const y = event.pageY - 10;
  
  cursor.style.left = x   "px";
  cursor.style.top = y   "px";
});

  
leftzone.addEventListener("mouseover", () => {
            prevgif.style.display = "block";
        })
leftzone.addEventListener("mouseout", () => {
            prevgif.style.display = "none";
        });
  
   rightzone.addEventListener("mouseover", () => {
            nextgif.style.display = "block";
             nextgif.style.opacity = "1";
        })
rightzone.addEventListener("mouseout", () => {
            nextgif.style.display = "none";
        });

body {
  background: #17181a;
/*   cursor: none; */
  overflow-x: hidden;
}

#cursor {
  position: absolute;
  background: white;
  border-radius: 50%;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index:500;
}

section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.zone {
  width: 500px;
  height: 500px;
  background: white;
  border-radius: 2px;
  cursor:none;
}

#right {
  position:absolute;
  right:50px;
}

#cursor div img {
  width:120px;
  height:Auto;
  position:absolute;
  z-index:500;
  display:none;
}

<div id="cursor">
  <div id="next--cursor"> <img src="https://media2.giphy.com/media/RgbTzGW9IIRHcUWxOJ/giphy.gif?cid=790b76114e5bfc8443de9eee9b628a5f3abf8c7781fb2c35&rid=giphy.gif&ct=s"> </div>
  <div id="prev--cursor"> <img src="https://media3.giphy.com/media/QvBKLx9rJwYhfvb5kE/giphy.gif?cid=790b761175a201200752f42876262319b308809adaf9f4eb&rid=giphy.gif&ct=s"> </div>
</div>
<section>
  <div id="left" data-hover="Prev"></div>
  
    <div id="right"  data-hover="next"></div>
  
</section>