CSS에서 전체 버튼 위로 마우스를 이동하는 방법

Question

전체 버튼 위로 마우스를 가져 가면 버튼 전체에 표시하고 싶습니다. 버튼에 배경 이미지가 있기 때문에 올바르게 처리 할 수 ​​없습니다. 버튼은 다음과 같습니다

CSS의는 다음과 같이 나타납니다

#tablist{ 
    padding: 0px auto 0px auto; 
    height: 32px; 
} 

#tablist li{ 
    display: block; 
    width: 150px; 
    height: 35px; 
    float: left; 
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    margin: 0px auto 0px auto; 
    text-align: center; 
    padding-top: 5px; 
    cursor: hand; 
    cursor: pointer; 
} 

#tablist ul:hover{ 
background-color: red; 
} 

.tablink{ 
    text-decoration:none; 
} 

.locked{ 
    background: url('../img/DashboardButtonsLocked.png') no-repeat; 
    background-position:5px -85px; 
} 
.unlocked{ 
    background: url('../img/DashboardButtonsLocked.png') no-repeat; 
    background-position:4px -2px; 
} 

내가 그것을 어떻게 해결합니까? 그것에 대한 지침이 필요합니다.

Answer 1

호버의 배경 속성을 재정의하는 시도 : http://jsfiddle.net/taQfU/

Answer 2

이봐, 난 당신이

#tablist li:hover{ 
background-color: red; 
}