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

Issue

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

Solution

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>

  
  

  
  
  
  

Answered By - Damian