Swap Background Image - jquery
Swap background image of an element using jquery.
HTML
<div id="swap" >
<li data-uri="http://www.jqueryscript.net/images/Minimalist-Image-Viewer-Lightbox-Plugin-with-jQuery.jpg">
</li>
<li data-uri="https://s-media-cache-ak0.pinimg.com/736x/f0/0e/03/f00e03208f5c14e6ddd33d05c126741d.jpg">
</li>
</div>
CSS
#swap li{
background-image: url('https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg');
background-position: 0, 0;
width: 400px;
height:200px;
}
JavaScript
$('#swap li').hover(function() {
$(this).css('background-image', 'url(' + $(this).attr("data-uri") + ')');
}, function(){
$(this).css('background-image', '');
});