CSS Sprites가 이미지 위에 깨진 이미지 아이콘을 표시하지만 마우스 오버가 여전히 작동 함

Question

나는 이것을 이해할 수 없습니다. 다른 누군가가 할 수 있기를 바랍니다.

이미지 버튼이 있습니다. 호버 효과가 잘 작동합니다. 그러나 버튼 이미지 위에 IE 깨진 이미지 아이콘이 있습니다. 여기

같네 : Funky ImageFunky Image Hover

당신이 볼 수 있듯이 ... 그들은 그 성가신 깨진 이미지를 제외하고 모두 작동합니다.

 
.donate-btn{ 
background: transparent url(/custom/img/donate-btn.png) no-repeat; 
overflow:hidden; 
height:45px; 
width:210px; 
float:left; 
} 
.donate-btn:hover{ 
background: transparent url(/custom/img/donate-btn.png) no-repeat; 
height:45px; 
width:210px; 
background-position: 0 -45px; 
} 

Answer 1

이 단순히 당신이 source 속성에 존재하지 않는 이미지를 참조하는 의미

여기 내 CSS입니다. 실제 <button> 태그를 대신 사용해보십시오.

.donate-btn{ 
    background: transparent url(/custom/img/donate-btn.png) 0 0 no-repeat; 
    overflow:hidden; 
    height:45px; 
    width:210px; 
    border: none; 
    padding: 0; 
    float:left; 
} 

.donate-btn:hover{ 
    background-position: 0 -45px; 
} 

나는 또한 호버 상태에서 불필요한 스타일을 제거하여 CSS를 간체 : 그것은 단지 몇 푼 스타일 테두리와 패딩을 제거하는 속성이 필요합니다.

<button class="donate-btn" type="submit"></button>