Question

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

基本上我在哪里“家”“关于”“投资组合”和“联系”我想用一个图像替换然后鼠标移动到另一个图像，这是可能的吗？

Answer 1

如果没有javascript，您将不得不使用background css属性，然后使用:hover伪类来更改图像源。

This website提供了使用background属性的相当全面的概述。

基本上它会是这样的：

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

UL的Mouseover事件

1 个答案: