Я пытаюсь создать меню, в котором при наведении курсора на каждый пункт меню изображение, расположенное вверху страницы, изменяется. До сих пор я не знаю, как сделать этот эффект при наведении, я поместил изображение в первый раздел div, но я думаю, что мне нужно поместить остальные изображения, но я не знаю, как связать каждый элемент меню для каждого изображения. Все остальное работает нормально.
Возможно ли это сделать с помощью CSS или единственный способ сделать это с помощью JavaScript
На этой странице вы можете увидеть пример, который очень близок к тому, что я хочу.
Лаура Мерони
Это 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;
}