javascript - 如何在导航悬停时在单独的 div 更改中制作图像？

Question

我有一个我正在使用的网站，我在页面顶部的 div 中有一个导航栏，然后是一个单独的 div，其中包含直接在其下方的图像。

我试图通过将鼠标悬停在导航栏的每个部分上来找出更改图像的最佳方法。

基本上，我希望在悬停主页导航功能时显示主页的图像，以及菜单的其余部分。

更新:

正如我之前尝试解释的(不是我能解释的那么清楚)我想让每个导航栏元素(主页、下载等)在其下方的 div 中显示不同的图像。这是这两个元素的代码部分。

            <li class="active"><a href="/">Home</a></li>
<li ><a href="/about">About</a></li>
<li ><a href="/mods">Mods</a></li>
<li><a href="/forums">Forums</a></li>
<li ><a href="/downloads">Downloads</a></li>
<li><a href="//blog.blog.com">Blog</a></li>
        </ul>
    </div>
</nav>

<div class="parallax-container">
    <div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
        <div class="row">
            <div class="hover-image white-text col s12 l6">
                <img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
        <h5 class="hover-header" style="padding-left: 20px;">Home</h2>
                <p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
            </div>
        </div>
    </div>
 <div class="parallax"><img src="/img/image.png"></div>

</div>

<style>
.hover-image {
    position: relative;
    width: 100%;
    margin: auto;
}

.hover-header {
    position: absolute;
    top: 350px;
    left: 10;
    width: 100%;
}
.hover-paragraph {
    position: absolute;
    top: 380px;
    width: 100%;
}
</style>

Page Layout

Answer 1

试试这样的 CSS；

.nav:hover .image{
    background-image: url('path/to/image.ext');
}

如果您可以分享您的代码，我可以更具体一些。