Функция мыши над JavaScript не работает на другом ПК, кроме моего

Question

У меня есть этот код, чтобы изменить изображение в gif, когда пользователь наводит курсор мыши на это изображение, я использую два разных типа файла, png, когда он статичен, когда при наведении курсора он превращается в другой файл, который gif,Я пишу код в заголовочном файле темы стека на WordPress, он отлично работает на моем ПК, но если мы откроем его на другом ПК, эффект наведения не будет работать.

Я попробовал другой код, это jQueryтакже, но он все еще не работает на другом ПК

Это код для div

<div class="vdw" style="border-style: solid; border-width: 2px; background: #FDFAF3;">
  <p class="vdw" style="padding-top: 2em;">
    <img id="static" class="border--round aligncenter static vdw" width="355" height="220" src="http://codingcom.lumikha.net/wp-content/uploads/2019/10/Book_4_reverseAnimation.png" data-src="http://codingcom.lumikha.net/wp-content/uploads/2019/10/Book_4_reverseAnimation.png" data-hover="/wp-content/uploads/2019/10/Book_4-1.gif" alt="Image">
  </p> 
  <p class="" style="text-align: center; padding-bottom: 5em;">
    <span style="font-family: 'PT Sans'; font-size: 14pt;" class=""><strong class="">Safe &amp; Secure</strong></span>
  </p>
</div>

, вот мой код JavaScript

<script type="text/javascript">
  jQuery(function($){
    $("#static").mouseover(function () {
      $(this).attr('src', $(this).data("hover"));
    }).mouseout(function () {
      $(this).attr('src', $(this).data("src"));
    });

  });
</script>

, затем я попыталсяэтот код тоже

 jQuery(function($){
   $("#static").on({
     mouseenter: function(){
       $(this).attr('src','http://codingcom.lumikha.net/wp-content/uploads/2019/10/Book_4-1.gif');
     },
     mouseleave: function(){
        $(this).attr('src','http://codingcom.lumikha.net/wp-content/uploads/2019/10/Book_4_reverseAnimation.png');
     }
   });
 });

Answer 1

Кстати, вы можете сделать это просто в CSS.

<div>
 <img class="static" src="http://codingcom.lumikha.net/wp-content/uploads/2019/10/Book_4_reverseAnimation.png">
 <img class="gif" src="http://codingcom.lumikha.net/wp-content/uploads/2019/10/Book_4-1.gif">
</div>

<style>
.gif{
display:none;
}
div:hover .static{
display:none;
}
div:hover .gif{
display:block;
} 
</style>