изменить фоновое изображение с помощью JS при наведении мыши

Question

Я хочу изменить фоновое изображение, когда посетитель переходит по ссылке на элемент, но я не могу заставить его работать.

$('.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><a href="#" data-background="easy-verwijderen.svg">item 1</a></li>
  <li><a href="#" data-background="easy-invite.svg">item 2</a></li>
  <li><a href="#" data-background="easy-install.svg">item 3</a> </li>
</ul>

Answer 1

В итоге я решил это следующим образом:

$('.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><a href="#" data-background="juHayWuaaoQ/400x200">Item 1</a></li>
  <li><a href="#" data-background="eWFdaPRFjwE/400x200">Item 2</a></li>
  <li><a href="#" data-background="eXHeq48Z-Q4/400x200">Item 3</a></li>
</ul>

Answer 2

Спасибо, вот что я ищу.Есть ли способ, что когда я нажимаю (не наведя курсор мыши), он не прыгает наверх?Я могу удалить href = "#", который работает, но не поддерживается в разных браузерах?