UL的mouseover事件

Question

我正在嘗試在ul導航中爲mouseover進行圖像更改。我似乎無法嘗試使其發揮作用。這裏是我的代碼：

<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給出了使用背景屬性的相當全面的概述。

基本上就會是這樣的：

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