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

javascriptがない場合は、backgroundcss属性を使用してから、疑似クラスを使用し:hoverて画像ソースを変更する必要があります。

このWebサイトでは、background属性の使用に関するかなり包括的な概要を説明しています。

基本的には次のようになります。

#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 に答える