懸停鏈接時更改其他 div 背景

Question

我有兩個div ，一個帶有鏈接（項目）列表，另一個是空的。 我的目標是每當我將鏈接懸停在第一個div ，第二個div的背景就會更改為項目對應的圖像。 這是我正在嘗試完成的示例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 函數。 請注意，您必須為.thumb設置一個height ，否則由於沒有內容，它將不可見，從而導致高度為 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);
});