CSS 이미지 롤오버가 작동하지 않습니다.

Question

두 개의 버튼을 표시해야하는 CSS 이미지 롤오버가 있습니다. 그것은 '정상'모드, '호버'모드 및 '활성'모드를위한 하나의 이미지를 사용합니다. 세 개의 이미지는 하나의 큰 이미지 파일의 일부입니다. 다른 프로젝트에서이 메서드를 구현하기 전에 잘 동작했지만이 프로젝트에서는 롤오버 효과가 작동하는 것 같습니다. 내 코드는 다음과 같습니다 :

a.buy { 
display: block; 
width: 160px; 
height: 40px; 
float:left; 
background:url('http://localhost/img/buy.png'); 
background-position: 0 0; 
} 

a.buy:hover { 
background:url('http://localhost/img/buy.png'); 
background-position:0 -40px; 
} 

a.buy:active { 
background:url('http://localhost/img/buy.png'); 
background-position:0 -80px; 
} 

.displace { 
position: absolute; 
left: -5000px; 
} 

a.sell { 
display: block; 
width: 160px; 
height: 40px; 
background: url('http://localhost/img/sell.png') 0 0 no-repeat; 
float:right; 
} 

a.sell:hover { 
background: url('http://localhost/img/sell.png') 0 -40px no-repeat; 
} 

a.sell:active { 
background: url('http://localhost/img/sell.png') 0 -80px no-repeat; 
} 

내가 문제가 중첩 된 div 태그와 함께 할 생각하지만 난 완전히 확실하지 않다 :

<div class="homealertbox"><h1 class="homealert">The Worlds Best Marketplace For Buying & Selling Websites</h1> 
<div class="addbuttons"> 
    <a href="http://localhost/buy" class="buy"><span class="displace">Buy</span></a> 
    <a href="http://localhost/sell" class="sell"><span class="displace">Sell</span></a> 
</div> 

내 CSS는 다음과 같습니다. 누군가 제발 도와 줄 수 있니? 또한 코드가이 글에서 제대로 포맷되지 않았다면 미리 사과드립니다.

Answer 1

코드가 저에게 효과적이었습니다. 내 로컬 컴퓨터에서 테스트하도록 변경 한 유일한 것은 CSS 이미지 배경의 URL입니다. 각각 2 개의 버튼 배경을 가진 2 개의 이미지를 만들고 각각을 sell.png 및 buy.png로 저장했습니다. CSS의 로컬 호스트/... 백그라운드 경로를 내가 저장 한 곳으로 변경했습니다. 이미지 경로/URL이 올바른지, 이미지의 올바른 배경이 정확한 위치에 있는지 확인하십시오. 내 이미지들입니다.

Working Demo