悬停链接时更改其他 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);
});