Я пытаюсь изменить фоновое изображение с помощью jQuery, и оно работает на моей локальной машине, но не работает на подаче онлайн

Question

Я пытаюсь изменить фоновое изображение в DIV, идеей является изменение статического изображения .png на .gif при наведении курсора мыши, и я не знаю, почему это работает на моей машине с использованием MAMP, но когда я помещаю свой сервер в Hostgator, мой код не работает, и в консоли появляется сообщение об ошибке: TypeError: undefined не является объектом (оценка 'background.replace')

Мой HTML-код:

<ul class="items"  id="lista1">

            <li>
            <div class="bg-img" id="featured" 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>

и мой jquery:

$('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);


           //var background = $(this).find("div#featured").css('background-image');
           //background = background.replace('.png','.gif');
           //$(this).find("#featured").css('background-image', background);

       });

У меня есть слой с тенью над этим div, поэтому я поместил курсор мыши в , но я хочу изменить DIV id = "Featured", где находится мое фоновое изображение.

JSFiddle my CODE:

https://jsfiddle.net/theangelis/dL86r7nt/1/?utm_source=website&utm_medium=embed&utm_campaign=dL86r7nt

Answer 1

$ (this) .css ('background-image', 'url (/images/client_box_grad.gif)');

Убедитесь, что вы указалидействительный URL изображения.