鼠标把div自定义值改成背景后?

After the mouse has changed the div custom value to the background?

希望jquery在divclass是article-image的时候,可以得到DIVchange_picture="http://web.com/1.png"的值, 然后成为 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>

$(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>

使用 class 属性 cover-image 将悬停事件绑定到 div。当鼠标移入时,先保存原来的背景图,然后使用.css方法设置新的背景图。移开鼠标后,设置回原来的背景图。