JavaScript 鼠标悬停图像答案

【问题标题】：JavaScript MouseOver ImageJavaScript 鼠标悬停图像
【发布时间】：2014-11-02 18:24:52
【问题描述】：

我正在尝试使用鼠标悬停来更改图片，但它似乎不起作用？谁能帮忙？这是我的代码

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

【问题讨论】：

'/'在第一个位置表示系统的根。使用相对方式。另外，尽量不要使用hover，而是mouseover 和mouseout
另外，当您处理mouseout 时，您将图像的src 更改为不是“Nov1.jpg”，而是“/folder/Nov1.jpg”

标签： javascript html mouseover

【解决方案1】：

可能有两个原因会导致此类问题。

在使用之前查看您是否包含了 jQuery 库。
你必须把你的代码放在$(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 代码找不到您要的。

I just rephrased this documentation : Here

【讨论】：

【解决方案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>

【讨论】：