JavaScript的mouseover图像交换问题

我想换出一个与JavaScript的悬停图像，但它似乎并没有工作，任何想法为什么？我认为这是做到这一点的正确方法。JavaScript的mouseover图像交换问题

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

来源

2012-06-14 johnsmithy

不，不是用内嵌代码！你可以使用jQuery吗？ – frenchie

是的，上个世纪就是这样做的方式。 –

我会打开更好的建议与jQuery也 – johnsmithy

它看起来像所有你需要做的（假设这些图像存在）被放在单引号围绕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'); 
}

来源

2012-06-14 16:32:09

我以为我们被告知不要直接触摸DOM，而是通过jQuery来抽象DOM操作，以避免浏览器的怪异。 – frenchie

啊，那样做！谢谢！ – johnsmithy

@frenchie我只是想回答OP的关注。我们也被告知不要将网站逻辑与演示文稿混合在一起，但JQuery肯定会把这个问题搞砸了。网络散布着不好的做法。 –

通过jQuery：

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

来源

2012-06-14 16:32:22 j08691

JavaScript的mouseover图像交换问题

回答

相关问题