Ребят подскажите пожалуйста, как сделать смену изображения в блоке при наведении на сылку, при наведения на каждый элемент менялась картинка?
HTML
<ul class="menu">
<li class="menu-img"></li>
<li>
<a href="#">Первый Элемент</a>
</li>
<li>
<a href="#">Второй Элемент</a>
</li>
<li>
<a href="#">Третий Элемент</a>
</li>
</ul>
CSS
.menu {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
}
li {
display: block;
}
.menu-img {
width: 200px;
height: 200px;
background: url(../img/1.jpg)no-repeat center center/cover;
}
li a {
margin-top: 20px;
display: block;
color: #000;
text-decoration: none;
}
li a:hover .menu-img {
background: url(../img/2.jpg)no-repeat center center/cover;
}
Пробовал даже просто ховер на ссылку сделать но картинка не меняется.
