Появление картинки в блоке, при наведении на элемент из списка

Если у вас есть блок с несколькими элементами и область, где должна появляться картинка при наведении на эти элементы, то вы можете использовать следующее решение.

Шаг 1: Добавление элементов и области для картинки

Добавьте в HTML-разметку два блока: один блок с элементами, на которые будете наводить, а другой блок для отображения картинки. Например:

<div class="item-block">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

<div class="image-block">
  <img src="" alt="" class="image">
</div>

Шаг 2: CSS-стилизация

Добавьте CSS-стили для элементов и области с картинкой. Например:

.item-block {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 23%;
  border: 1px solid #ccc;
  padding: 10px;
}

.image-block {
  position: relative;
  width: 100%;
  height: 300px;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

Шаг 3: JavaScript-скрипт

JavaScript

// Получаем все элементы item и один элемент image
const items = document.querySelectorAll('.item');
const image = document.querySelector('.image');

// Для каждого элемента item добавляем обработчики событий mouseover и mouseleave.
// При mouseover показываем соответствующую картинку в элементе image
// При mouseleave скрываем элемент image
items.forEach(item => {
  item.addEventListener('mouseover', () => {
    const imageUrl = `images/${item.innerText}.jpg`;
    image.setAttribute('src', imageUrl);
    image.style.display = 'block';
  });

  item.addEventListener('mouseleave', () => {
    image.style.display = 'none';
  });
});

jQuery

$(document).ready(function() {
  // Для каждого элемента item добавляем обработчики событий mouseover и mouseleave.
  // При mouseover показываем соответствующую картинку в элементе image
  // При mouseleave скрываем элемент image
  $('.item').on('mouseover', function() {
    const imageUrl = `images/${$(this).text()}.jpg`;
    $('.image').attr('src', imageUrl).show();
  }).on('mouseleave', function() {
    $('.image').hide();
  });
});

Шаг 4: Загрузка изображений

Добавьте изображения в папку "images" и назовите их так же, как и текст элементов. Например, "Item 1.jpg", "Item 2.jpg" и т.д.

Готово! Теперь при наведении на элемент появится соответствующая картинка в области для картинки.