Css UL的鼠标悬停事件

我正试图在ul导航中为鼠标盖做一个图像更改。我似乎无法让它发挥作用。这是我的密码：

<ul id="nav">
    <li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

---

基本上，当我有“主页”关于“公文包”和“联系人”时，我想用一个图像替换，然后将鼠标移到另一个图像上，这是可能的吗？？？

如果没有javascript，你必须使用

背景
css属性，然后使用
：hover
伪类来更改图像源

提供了使用背景属性的相当全面的概述

基本上是这样的：

#nav li {
    background: url(images/image1.png) 0 0 no-repeat;
}
#nav li:hover {
    background-image: url(images/image2.png);
}

为什么您想要一个用于简单图像交换的js解决方案？提供的CSS解决方案完全符合您的要求。
#nav li {
    background: url(images/image1.png) 0 0 no-repeat;
}
#nav li:hover {
    background-image: url(images/image2.png);
}