鼠标悬停在javascript功能上，除了我的PC之外，在另一台PC上不起作用

Question

当用户将鼠标悬停在该图像上时，我有此代码将图像更改为 gif，我使用两种不同的文件类型，当它是静态的 png 然后当悬停时它会变成另一个文件 gif。我正在 wordpress 上的堆栈主题的头文件中编码，它在我的 PC 上完美运行，但如果我们在另一台 PC 上打开它，悬停效果将不起作用。

我尝试了另一个代码，它也是一个jQuery，但它仍然无法在另一台PC上运行

这是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>