JavaScript MouseOver圖片

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

可能有兩個原因會造成這種問題。

1. 使用前請先查看是否已包含jQuery庫。
2. 您必須將代碼放入$（document）.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的幫手。 當DOM元素准備好使用時，它使javaScript執行它包含的代碼。 因此，作為開發人員，您不必擔心DOM是否已加載。

這就是您要在DOM元素#myImg可用之前對其進行操作的原因。 而且您的javaScript / jQuery代碼找不到您要的。

我只是改寫了這個文檔 ： 這里

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>