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

Question

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"class="zone" data-hover="Prev"></div>
<div id="right" class="zone" data-hover="next"></div>

CSS

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

JS

   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";
    });

Answer 1

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"class="zone" data-hover="Prev"></div> <div id="right" class="zone" data-hover="next"></div> </section>