The div element following my cursor (JS) disappears when I hover over a CSS keyframe animation - how can I fix this?

Question

I'm using a mousemove event in JS to get a small ball image (encased in a div) to follow my cursor. I also have an image in a separate div which uses keyframes animation in CSS to shake when the mouse cursor hovers over it.

My problem is that when I hover over the keyframe image and it shakes, the ball image disappears from the cursor.

Is there anyway to keep it visible over the top of the shaking image, while the shaking image is actively being animated?

body {
  background-color: white;
}

h1 {
  color: teal;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

div {
  background-color: teal;
  padding: 5%;
  text-align: center;
}

#circle {
  max-width: 10%;
  background-color: transparent;
  position: absolute;
}

#circle:hover {
  cursor: url('***********'), auto;
}

#shakingimage {
  max-width: 45%;
  position: relative;
}

#shakingimage:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;

  cursor: url('************'), auto;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.buttonbox {
  display: inline-flex;
  justify-content: center;
  flex-direction: row;
}

button {
  padding: 15px 25px;
  margin: 5px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: solid 2px white;
  color: #ffffff;
  background-color: #008080;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button:hover {
  background-color: rgb(0, 172, 172);
}

button:active {
  background-color: #008080;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

let circle = document.getElementById('circle')
const onMouseMove = (e) => {
  circle.style.left = e.pageX + 'px'
  circle.style.top = e.pageY + 'px'
}
document.addEventListener('mousemove', onMouseMove)

Answer 1

to make that the small ball image circle remains visible over the shaking image shakingimage) you can apply a higher z-index value to the #circle element. I think this will position it above the shakingimage in the stacking order. how about updating your CSS code as the following

#circle {
  max-width: 10%;
  background-color: transparent;
  position: absolute;
  z-index: 2; 
}
#shakingimage {
  max-width: 45%;
  position: relative;
  z-index: 1; 
}