<div class="drawer">
  <div class="drawer__nav">
    <p>link 1</p>
    <p>link 2</p>
    <p>link 3</p>
    <p>link 4</p>
  </div>

  <div class="drawer__img">
    <p>img 1</p>
    <p>img 2</p>
    <p>img 3</p>
    <p>img 4</p>    
  </div>
</div>

.drawer {
  display: flex;

  > * {
    width: 100px;
  }
}

p {
  margin: 0;
  padding: 10px 0;
  background: lightGray;
}

const links = document.querySelectorAll('.drawer__nav p')
const images = document.querySelectorAll('.drawer__img p')

let prevImageIndex = 0
let currentImageIndex = 0

links.forEach((link, index) => {
  const image = images[index]

  link.addEventListener('mouseenter', () => {
    for (let i = 0; i < images.length; i++) {
      images[i].style.zIndex = 1
    }
    image.style.zIndex = '9'

    prevImageIndex = currentImageIndex;
    currentImageIndex = index
  });

  link.addEventListener('mouseleave', () => {
    for (let i = 0; i < images.length; i++) {
      images[i].style.zIndex = 1
    }
    images[prevImageIndex].style.zIndex = '4'
    images[currentImageIndex].style.zIndex = '9'
  })
})

// let lastIndex

// links.forEach((link, index) => {
//   const image = images[index]

//   link.addEventListener('mouseenter', () => {
//     lastIndex = index

//     image.style.zIndex = 9
//   })

//   link.addEventListener('mouseleave', () => {

//     // images[lastIndex].style.zIndex = 4
//     // image.style.zIndex = 1;

//     if (index !== lastIndex) {
//       image.style.zIndex = '4'
//     } else {
//       image.style.zIndex = '1'
//     }
//   })
// })