在菜单上创建悬停效应器

Question

我正在尝试实现一个菜单，当鼠标悬停在菜单上的每个项目上时，页面顶部的图像会发生变化。到目前为止，我还不知道如何实现悬停效果，我把图像放在了第一个div部分，但我想我必须把其余的图像放进去，但我不知道如何将菜单的每个项目链接到每个图像。其他一切都很好。

有没有可能用CSS做到这一点，或者唯一的方法是用JavaScript做到

在这个页面中，你可以看到一个非常接近我想要的例子。Laura Meroni

这是菜单的html：

<div class="header-top"> 
<img src="https://leyandlaw.callibree.com/wp-content/uploads/2018/10/IMAGENES-MENU.jpg" class="responsive" alt="">
</div>
<div class="flex-container">
<div class="col-1">
<img src="https://leyandlaw.callibree.com/wp-content/uploads/2018/10/leyandlay-abogados.jpg" class="logo-responsive" alt="">
</div>
<nav class="col-2" >
<ul>
<li>
<a href="#">Colaboración con la prensa</a>
<img src="" alt="">
</li>
<li>
<a href="#">Valores L&L</a>
<img src="" alt="">
</li>
<li>
<a href="#">Blog</a>
<img src="" alt="">
</li>
<li>
<a href="#">Contacto</a>
<img src="" alt="">
</li>
</ul>
</nav>
<nav class="col-3">
<ul>
<li>
<a href="#">Especialidades</a>
<img src="" alt="">
</li>
<li>
<a href="#">Confían en nosotros</a>
<img src="" alt="">
</li>
<li>
<a href="#">Desayunos L&L</a>
<img src="" alt="">
</li>
<li>
<a href="#">Equipo</a>
<img src="" alt="">
</li>
</ul>
</nav>
</div>

这就是我的CSS：

* {
margin: 0;
padding: 0;
}
body { 
background: #fff;
}
.header-top{
background: #fff;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.responsive{
width: 100%;
}
.responsive-fondo {
width: 100%;
position: absolute;
top: 0;
z-index: -20;
}
li a:hover> .responsive-fondo {
z-index: 2;
left: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo-responsive{
height: auto;
width: 100%;
max-width: 400px;
}
.flex-container {
display: flex;
align-items: stretch;
background-color: #fff;
padding: 40px;
}
.col-1{
flex-grow: 3;
}
.col-2{
flex-grow: 2;
margin-top: 100px;
}
.col-3{
flex-grow: 2;
margin-top: 100px;
}
ul {
list-style: none;
margin: 0px
}
li a {
z-index: 1;
font-weight: 300;
color: #000000;
text-decoration: none;
font-size: 26px;
font-family: "Raleway" sans-serif;
line-height: 1.8em;
}
li:nth-child(1) {
padding-top: 0px;
}

Answer 1

@Manuel Pavía你想让用户像一样在锚点上悬停时进行交互吗

<a href="#">Valores L&L</a>

图像生效后立即生效？

如果是这样，你可以做：

a:hover + img { //img stuff }

Answer 2

使用class.hover {/path/to/image}为什么不尝试使用bootstrap，它更容易实现任何css与bootstrap