javascript 鼠标悬停图像交换问题答案

【问题标题】：javascript mouseover image swap issuesjavascript 鼠标悬停图像交换问题
【发布时间】：2012-06-15 00:33:40
【问题描述】：

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

【问题讨论】：

不，不是内联代码！你会用jQuery吗？
是的，上个世纪就是这样做的。
我也愿意接受更好的 jquery 建议
有趣的事实：您不需要使用 JQuery 来处理小的鼠标悬停事件。 Cripe，这就像使用轻便摩托车而不是步行 3 英尺。

标签： javascript mouseover

【解决方案1】：

看起来您需要做的所有事情（假设这些图像存在）就是在 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');
}

【讨论】：

我以为我们被告知永远不要直接接触 DOM，而是通过 jQuery 抽象 DOM 操作以避免浏览器异常。
@frenchie 我只是想回答 OP 的担忧。我们还被告知不要将网站逻辑与演示文稿混为一谈，但 JQuery 确实搞砸了。网络上充斥着不良做法。

【解决方案2】：

通过 jQuery：

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

【讨论】：