При наведении ссылки изменить другой фон div

Question

У меня есть два div s, один со списком ссылок (проектов), а другой пустой. Моя цель состоит в том, чтобы всякий раз, когда я наводил ссылку на первый div, фон второго div изменял изображение, соответствующее проекту. Вот пример того, что я пытаюсь выполнить sh https://www.humbertpoyet.com/about/press, и вот мой код. Спасибо

HTML

<div class="wrapper">
    <div class="grid-container">
        <div class="item6">
            <ul>
                <li><h3>Case Studys</h3></li>
                <li><a href="#">Project 1</a></li>
                <li><a href="#">Project 2</a></li>
                <li><a href="#">Project 3</a></li>
                <li><a href="#">Project 4</a></li>
            </ul>
        </div>
        <div class="item6 thumb">
    </div>
</div>

CSS

.item6 {grid-column: span 6;}
.thumb {background-size: cover; background-position: center; background-repeat: no-repeat;}

Answer 1

Вы можете использовать следующую функцию jQuery. Обратите внимание, что вы должны установить height для .thumb, в противном случае он будет невидимым из-за отсутствия содержимого, что приведет к высоте 0.

$('.item6>ul>li:nth-child(2)').hover(function() {
  $('.item6.thumb').css('background-image', 'url(https://placehold.it/600x400/fa0)');
});
$('.item6>ul>li:nth-child(3)').hover(function() {
  $('.item6.thumb').css('background-image', 'url(https://placehold.it/800x300/09b)');
});
$('.item6>ul>li:nth-child(4)').hover(function() {
  $('.item6.thumb').css('background-image', 'url(https://placehold.it/300x500/d2c)');
});
$('.item6>ul>li:nth-child(5)').hover(function() {
  $('.item6.thumb').css('background-image', 'url(https://placehold.it/100x300/aa4)');
});

.item6 {
  grid-column: span 6;
}

.thumb {
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="grid-container">
    <div class="item6">
      <ul>
        <li>
          <h3>Case Studys</h3>
        </li>
        <li><a href="#">Project 1</a></li>
        <li><a href="#">Project 2</a></li>
        <li><a href="#">Project 3</a></li>
        <li><a href="#">Project 4</a></li>
      </ul>
    </div>
    <div class="item6 thumb">
    </div>
  </div>

Answer 2

Если вы добавите data-url к своим элементам списка, вы можете использовать JQuery для захвата, когда пользователь наводит курсор над элементом списка, взять желаемое изображение и заменить фон второго элемента div.

<li data-url='url("paper.gif")'><h3>Case Studys</h3></li>


$(".item6").on("mouseenter", "li", function(){
    let imageUrl = $(this).attr("data-url");
    $(".item6.tumb").css("background-image", imageUrl);
});