移动器悬停时停止 gif 不起作用

Posted 2023-03-25

技术标签:

【中文标题】移动器悬停时停止 gif 不起作用【英文标题】：Stop gif on mover hover does not work 【发布时间】：2017-02-14 15:00:36 【问题描述】：

我想先显示一个 GIF，当鼠标悬停在 GIF 上时，它应该显示一个不同的 JPG 图片——这样它看起来就停止了。

我试过这段代码，但没有用。我想知道哪个部分需要修复。

<html>
<script>
$(document).ready(function()

    $("#imgDino").hover(
        function()
        
            $(this).attr("src",
            "http://s2.favim.com/610/150619/airplane-fly-landscape-plane-Favim.com-2831842.jpg");
        ,
        function()
        
            $(this).attr("src", "https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif");
                                 
    );                  
);
</script>
 <body>
    <img id="imgDino" src="https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif" />

</body>
</html>

【问题讨论】：

【参考方案1】：

你的代码有两个问题：

你没有加载 jQuery - 所以你不能使用它。控制台 (F12) 会为此引发错误：Uncaught ReferenceError: $ is not defined

您在 dom-element 可用之前注册了 javascript-event

因此，您的方案的可行解决方案是：

<html>

  <head>

  </head>

  <body>
    <img id="imgDino" src="https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
      $(document).ready(function() 
        $("#imgDino").hover(
          function() 
            $(this).attr("src",
              "http://s2.favim.com/610/150619/airplane-fly-landscape-plane-Favim.com-2831842.jpg");
          ,
          function() 
            $(this).attr("src", "https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif");
          
        );
      );

    </script>
  </body>

</html>

【讨论】：

【参考方案2】：

您的脚本使用 JQuery 的语法，在您的 <head></head> 标签之间添加以下内容：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

执行此操作后，代码将按预期工作（尽管脚本使用的图像效果看起来有点奇怪）。

另外，由于这个问题与 JQuery 有关，您应该将该标签添加到您的问题中。

【讨论】：

以上是关于移动器悬停时停止 gif 不起作用的主要内容，如果未能解决你的问题，请参考以下文章

基于类事件的 Jquery 和悬停选择器不起作用

鼠标悬停的背景移动的工作 Jsfiddle 示例在实际项目环境（Django）中不起作用？

使用jquery动态更改背景颜色后，背景颜色的CSS悬停选择器不起作用

Jquery移动按钮点击角落不起作用

悬停时的Jquery不起作用

为啥背景过渡：linear-gradient() 在悬停时不起作用？