将鼠标悬停在导航栏链接上时尝试更改横幅图像

【问题标题】：Trying to change banner image when hovering over navbar link将鼠标悬停在导航栏链接上时尝试更改横幅图像
【发布时间】：2011-07-13 18:58:33
【问题描述】：

当我将鼠标悬停在列表中的链接上时，我试图将页面顶部的图像更改为另一个图像。任何想法如何做到这一点？

【问题讨论】：

- 链接
  - ul li a:hover div#top {background-image: url ("image2");}

标签： javascript css navbar

【解决方案1】：

有很多方法。这是一个简单的：

<img id="topImg" scr="image.jpg" />

<a href="#" onmouseover="document.topImg.src='image_over.jpg'"
            onmouseout="document.topImg.src='image.jpg'">Rollover</a>

【讨论】：

【解决方案2】：

如果使用 jQuery：

$('#tabbar a').hover(
function(){$('#banner').attr('src',"newimg.png')}
function(){$('#banner').attr('src',"oldimg.png')}
)

如果没有：

要求鼠标悬停：

document.getElementById('banner').src = 'newimage.png'

呼吁 onmouseout：

document.getElementById('banner').src = 'olgimage.png'

您还可以使用精灵并更改背景位置，这样您就可以使用更少的资源并且在显示时无需加载图像

【讨论】：

【解决方案3】：

您也可以使用 CSS Sprite ： http://css-tricks.com/158-css-sprites/

看看那个...

它优化了http请求的数量，而且非常好用...

【讨论】：