I am attempting to modify the background-image within a DIV element. The goal is to switch from a static .png image to a .gif when hovering with the mouse. Strangely, this functionality works on my local machine using MAMP, but once I upload it to my server on Hostgator, the code no longer functions properly. In the console, an error message appears: TypeError: undefined is not an object (evaluating 'background.replace')
Here is my HTML:
<ul class="items" id="lista1">
<li>
<div class="bg-img" id="featured" style="background-image: url('img/thumbs/tb_nesfit.png');">
<div class="bgshadow_thumb" id="fshadow"></div>
<div class="text-thumb">
<div class="bottom">Cookies Nesfit</div>
</div>
</div>
<a href="project.php?job=nesfit-cookies">
<div class="content">
<div class="content-info">
<button class="ico"><i class="fa fa-play"></i></button>
<h2>Cookies Nesfit</h2>
<h3><span class="category">Animação, Simulação</span> | 2018</h3>
</div>
<div class="content-buttons">
<button class="ico"><i class="far fa-heart"></i></button>
<button class="ico"><i class="far fa-clock"></i></button>
<button class="ico"><i class="fa fa-ellipsis-h"></i></button>
</div>
</div>
</a>
</li>
</ul>
And here is my jQuery function:
$('li').mouseover(function() {
var background = $(this).find("div#featured").css('background-image');
background = background.replace('.png','.gif');
$(this).find("div#featured").css('background-image', background);
});
There is a shadow layer above this div, so I have applied the mouseover event to the <li> element, while intending to change the background-image of the DIV with the id "Featured".
Here is my CODE on JSFiddle: