После того, как мышь изменила пользовательское значение div на фон?

Question

Я надеюсь, что jquery может получить значение DIV change_picture = "http://web.com/1.png", когда класс div является article-image, а затем стать фоном CSS. Когда мышь будет удалена, продолжить. Показать исходный фон http://web.com/2.png.

Как написать jquery, спросите совета. Большое спасибо

<div class="article-image cover-image homelazy" change_picture="http://web.com/1.png" style="background-image: url(http://web.com/2.png);">
</div>

Answer 1

$(function() {
  var originalImg = '';
  $('.cover-image').hover(function() {
    originalImg = $(this).css('background-image');
    $(this).css('background-image', 'url(' + $(this).attr('change_picture') + ')');
  }, function() {
    $(this).css('background-image', originalImg);
  })
})

.cover-image {
  width: 300px;
  height: 200px;
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="article-image cover-image homelazy" change_picture="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg" style="background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);">
</div>

Привязать событие наведения к элементу div с атрибутом класса cover-image. При перемещении мыши сначала сохраните исходное фоновое изображение, а затем используйте метод .css для установки нового фонового изображения. После удаления мыши установите исходное фоновое изображение обратно.