Question

我正在尝试使用鼠标悬停来改变图片，但它似乎不起作用？有人可以帮忙吗？这是我的代码

<img id="myImg" src="Nov1.jpg" alt="November" style="width:452px;height:127px">

  <script>
  $('#myImg').hover(function() {
    $(this).attr('src', '/folder/nov2014.jpg');
   }, function() {
   $(this).attr('src', '/folder/Nov1.jpg');
  });


  </script>

Answer 1

可能有两个原因造成这样的问题。

在使用 jQuery 库之前，请查看是否包含 jQuery 库。
您必须将代码放在 $（文档）.ready（function（）{ //此处代码}）;

试试这种方式，

HTML：

<img id="myImg" src="http://www.allgraphics123.com/ag/01/14142/14142.gif" />

jQuery：

$(document).ready(function(){
    $('#myImg').hover(function() {
        $(this).attr('src', 'http://thumb7.shutterstock.com/display_pic_with_logo/265489/120305665/stock-vector-cartoon-parrot-vector-clip-art-illustration-with-simple-gradients-all-in-a-single-layer-120305665.jpg');
        }, function() {
        $(this).attr('src', 'http://www.allgraphics123.com/ag/01/14142/14142.gif');
    });
});

jsFiddle

为什么你的代码不起作用?????

在操作任何DOM元素之前，必须先加载页面。因此，出现了一个问题，

如何知道页面是否已加载!!!

$（document）.ready（）; 来自 jQuery 的帮助。它允许javaScript在DOM元素准备好使用时执行它包含的代码。因此，作为开发人员，您不必担心DOM是否已加载。

这就是你在可用之前操纵DOM元素#myImg的原因。而你的javaScript / jQuery代码无法找到你所要求的。

I just rephrased this documentation : Here

Answer 2

尝试：

  <img id="myImg" src="Nov1.jpg" alt="November" style="width:452px;height:127px">

  <script>

    $("#myImg")
            .mouseover(function() {
                $(this).attr("src", "/folder/nov2014.jpg");
            })
            .mouseout(function() {
                $(this).attr("src", "/folder/Nov1.jpg");
            });   
  </script>

JavaScript MouseOver图像

2 个答案: