Как сделать смену фона всей страницы при наведении на ссылку?
Как-то вот так:<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/
Как-то вот так:<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/