Question

我想首先显示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>

Answer 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>

Answer 2

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

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

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

此外，由于此问题与JQuery有关，因此您应该将该标记添加到您的问题中。

在移动器上停止gif悬停不起作用

2 个答案: