JavaScript 鼠标悬停图像交换问题

javascript mouseover image swap issues

本文关键字：交换 问题 图像 悬停 鼠标 JavaScript      更新时间：2023-09-26

我正在尝试用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>

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

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

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

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

Via jQuery：

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