<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by paralax</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="info">
</div>
<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>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

.drawer {
  display: flex;
}
.drawer > * {
  width: 100px;
}

.info
{
  position: sticky;
  right: 0;
  top: 0;
  z-index: 10 !important; /*High*/
}

.drawer__img
{
    z-index: 1;
}

p {
  margin: 0;
  padding: 10px 0;
  background: lightGray;
  transition: ease-out;
}
const links = document.querySelectorAll('.drawer__nav p');
const images = document.querySelectorAll('.drawer__img p');
const info = document.querySelector('.info');

let currentImage = null;
let currentIndex = null;

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

  link.addEventListener('mouseover', () => {
    // Определяем все элементы 
    for (let j = 0; j < images.length; j++) {
      const _image = images[j];
      _image.style.zIndex = 1
    }
    if (currentImage) {
      currentImage.style.zIndex = 4; // устанавливаем zIndex 4 для предыдущего элемента
    }
    image.style.zIndex = 9; // устанавливаем zIndex 9 для текущего элемента
    currentImage = image; // сохраняем текущий элемент
    currentIndex = index; // сохраняем текущий индекс
    updateInfo(); // обновляем информацию в элементе info
  });
});

function updateInfo() {
  let linksInfo = '';
  links.forEach((link, index) => {
    linksInfo += `Link: ${link.textContent}, zIndex: ${images[index].style.zIndex}<br>`;
  });
  info.innerHTML = linksInfo;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.