CSS 스프라이트 사용 하시겠습니까?

Question

CSS 스프라이트를 사용하여 탐색 모음을 만들려고합니다. 이미지가 있지만 코드의 문제 일뿐입니다.

.navi a{ 
display:block; 
float:left; 
height:40px; 
overflow:hidden; 
background-position:left top; 
} 
navi a:hover img{ 
margin-top:-40px; 
} 

과 HTML은 다음과 같습니다 : 순간 그것이,

<div class="topbar"> 
<img alt="title" src="title.png"/><br/> 
<div class="navi"> 
<a href="index.html" class="home"><img src="home_up.png"/></a> 
</div> 
</div> 

내가 작업이 모두 정상적인 이미지, 높이가 정확하고 이미지 오프의 나머지 부분을 잘라하지만 때 나는 아무것도하지 않는다. 어떤 제안? 고마워요

Answer 1

첫 번째 스타일은 .navi a입니다. 그렇지만 글자는 navi a:hover img입니다. 즉, 두 번째 스타일은 <navi /> 요소 내부에 있고 클래스 이름이 navi 인 요소 안에 있지 않은 링크의 모든 이미지에 적용됩니다.

그래서 대신 :

navi a:hover img 

를 작성해야 :

.navi a:hover img