Как сделать смену изображения при ховере на ссылку?

Question

[Aiode]

Ребят подскажите пожалуйста, как сделать смену изображения в блоке при наведении на сылку, при наведения на каждый элемент менялась картинка?

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;
}

Пробовал даже просто ховер на ссылку сделать но картинка не меняется.

Answer 1

[Ankhena]

На чистом CSS, без JS https://jsfiddle.net/b31Lr7fk/
Вместо цветов поставьте свои картинки.

Comments

[Aiode]

Спасибо за такой вариант решения.

[Ankhena]

Aiode, разметка с дополнительным li для картинки в любом случае семантически неверная. Если все таки решите использовать js, то блок с картинкой нужно вынимать из списка.

Answer 2

[Alex]

Почитайте больше про иерархию селекторов.
Вот это
li a:hover .menu-img
Интерпритируется как

<li>
  …
    <a :hover>
      …
        <element class="menu-img">

Потому ваши стили не применяются так как вы хотите.

Что касается самой задачи. При такой верстке я не знаю способа сделать то, что вы хотите без использования JavaScript

Comments

[Aiode]

Спасибо Вам за ответ внесли ясность, тоже подумал что надо делать через js, только теперь как это правильно сделать))

[Alex]

Aiode, Лучше всего будет добавлять УРЛ картинки в атрибут

<a href="#" data-thumbnail-url="/path/to/img">Второй Элемент</a>

А там уже при наведении просто брать значение атрибута и подставлять

[Aiode]

Спасибо Вам!

[archelon]

на css псевдоэлементами

Answer 3

[MamaLuyba]

через css никак (при такой структуре). через скрипты - легко.

Comments

[Aiode]

Скажите могли бы Вы помочь с js как это правильно сделать?

[MamaLuyba]

Aiode, могу. для этого и сайт существует.
можно через switch, если нет привязки ссылок к изображениям:

function change(anchor) {
switch(anchor.innerText) {
case "Первый элемент": document.getElementsByClassName("menu-img")[0].style.backgroundImage = 'Фон №1';
break;
case "Второй элемент": document.getElementsByClassName("menu-img")[0].style.backgroundImage = 'Фон №2';
break;
case "Третий элемент": document.getElementsByClassName("menu-img")[0].style.backgroundImage = 'Фон №3';
break;
}
}

далее вешаешь onmouseover на каждую из ссылок:
<a onmouseover='change(this)'></a>

[Aiode]

Спасибо Вам!

[Ankhena]

MamaLuyba,

через css никак

ну уж никак

[MamaLuyba]

Ankhena, поэтому я и не куратор CSS :)

[Ankhena]

MamaLuyba, :)
не зарекайтесь только ))))

[MamaLuyba]

Ankhena, не буду:) я так понимаю, ваше решение работает потому, что у li::before стоит position: absolute - и поэтому все li::before как бы накладываются друг на друга над ссылками, а после просто по наведению становятся block? иначе бы все ::before были бы над каждым li.
возьму на вооружение:)

[Ankhena]

MamaLuyba, еще они позиционируются относительно ul, а не своих li.

Можно не display менять, а вообще добавлять ::before только при ховере или менять размеры с 0 до нужных, если анимация какая-нибудь нужна.