0

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

和CSS：

ul#nav {
width: 940px; list-style: none; overflow: hidden; margin: -134px auto 25px auto;}

ul#nav li {width: 126px; height: 33px; float: left; padding: 13px 0 0 0;
    font-weight: bold; text-align: center; text-transform: uppercase; }




    ul#nav li:nth-child(1) {
        margin: 0 60px 0 0;

    }
    ul#nav li:nth-child(2) {
        margin: 0 316px 0 0;
    }
    ul#nav li:nth-child(3) {
        margin: 0 60px 0 0;
    }
    ul#nav li:nth-child(4) {
        margin: 0;
    }

    ul#nav li a {
        color: white; text-decoration: none;
    }
        ul#nav li a:hover {
            color: #660066;
        }

基本上我有“家”“关于”“投资组合”和“联系人”的地方，我想用一个图像替换，然后将鼠标悬停到不同的图像上，这可能吗？？？

4

1 回答 1

1

Without javascript, you're going to have to use the background css attribute, and then use the :hover pseudoclass to change the image source.

This website gives a fairly comprehensive overview of using the background attribute.

Basically it will be something like:

#nav li {
    background: url(images/image1.png) 0 0 no-repeat;
}
#nav li:hover {
    background-image: url(images/image2.png);
}
于 2012-10-23T00:44:45.007 回答