Как сделать смену фона всей страницы при наведении на ссылку?

Question

[Кирилл П.]

Привет.

Есть такой код:

<nav>
<ul>
<li><a>Ссылка 1</a></li>
<li><a>Ссылка 2</a></li>
<li><a>Ссылка 3</a></li>
</ul>
</nav>

<div class="index-bg"></div>

В .index-bg я задаю background-image, который становится фоном для всей страницы.

Как менять фон div-а при наведении на ссылки? И можно ли сделать это с помощью JS и/или jQuery?

Answer 1

[Алексей Ярков]

Как-то вот так:

<nav>
    <ul>
        <li><a href="" class="chbg" data-bg="1-bg.jpg">Ссылка 1</a></li>
        <li><a href="" class="chbg" data-bg="2-bg.jpg">Ссылка 2</a></li>
        <li><a href="" class="chbg" data-bg="3-bg.jpg">Ссылка 3</a></li>
    </ul>
</nav>

<div class="index-bg"></div>

$(document).on('ready', function(){
	$('.chbg').on('mouseover', function(){
		var url = $(this).data('bg');
		$('.index-bg').css({"background-image": "url("+url+")"});
	});
});

https://jsfiddle.net/yarkov_aleksei/45tds8tL/

Answer 2

[Олег]

Без js можно так извратиться ;) https://jsfiddle.net/joomla/yfe72p8w/