javascript - javascript 鼠标悬停图像交换问题

Question

我正在尝试用 javascript 替换悬停图像，但它似乎不起作用，知道为什么吗？我认为这是正确的方法。

<li>
   <a onMouseOver="document.fbi.src=images/facebookIconHover.jpg" onMouseOut="document.fbi.src=images/facebookIcon.jpg"
href="http://www.facebook.com">
     <img src="images/facebookIcon.jpg" NAME="fbi">
  </a>
</li>

Answer 1

看起来您需要做的所有事情（假设这些图像存在）就是在src字符串周围加上单引号。

onMouseOver="document.fbi.src='images/facebookIconHover.jpg'"
onMouseOut="document.fbi.src='images/facebookIcon.jpg'"

不过，我建议您:hover对图像使用 CSS，因为它将演示与内容/脚本分开。

#element {
   background-image:url('url1.png');
}
#element:hover {
   background-image:url('url2.png');
}

Answer 2

通过 jQuery：

$('img[name="fbi"]').hover(function(){
    $(this).attr('src','images/facebookIconHover.jpg');
},function(){
    $(this).attr('src','images/facebookIcon.jpg');
});