마우스 오버 이벤트에 대한

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

자바 스크립트가 없으면 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); 
}