change background image with js on mouse over - background

Question

I want to change the background image when the visitor goes over the item link but I don't get it to work.
$('.swap').on('mouseover', 'a', function() {
var backgroundUrl = "https://xxxxxxxxx.online/afbeeldingen/" + $(this).data('background');
$('.swap').css({
'background-image': 'url(' + backgroundUrl + ')'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="swap"></div>
<ul class="nav">
<li>item 1</li>
<li>item 2</li>
<li>item 3 </li>
</ul>

Answer 1

I ended up solving it as follows:
$('.nav').on('mouseover', 'a', function() {
var backgroundUrl = "https://source.unsplash.com/" + $(this).attr('data-background');
$(".swap").attr("style", "background-image: url(" + backgroundUrl + ")");
});
.swap {
height: 200px;
width: 400px;
border: 1px solid black;
background-repeat: no-repeat;
background-image: url('https://source.unsplash.com/juHayWuaaoQ/400x200');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="swap">div with background</div>
<ul class="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Answer 2

Thanks thats what I'm looking for. Is there a way that when I click (not mouse over) it doesn't jump to the top? I can remove href="#" that seems to work but don't now of that is supported on different browsers?