CSS 배경을 사용하여 이미지 호버가 작동하지 않습니다.

링크가있는 이미지에 호버 효과를 만들려고합니다. 그것에 대한 마크 업은 다음과 같습니다.CSS 배경을 사용하여 이미지 호버가 작동하지 않습니다.

이미지 크기는 174 x 72이며이 이미지 위로 마우스를 가져 가면 아래쪽 절반이 표시됩니다. 내 CSS가 전혀 작동하지 않습니다. 누군가 제가 잘못하고있는 것을 지적 해 주시겠습니까? 사전에

많은 감사

.phoneNumber { 
    background: #101112 url("../img/phone.png") 0 0px no-repeat; 
    height:  36px; 
    width:  174px; 
    display:  block; 
    float:  right; 
    margin:  0; 
    padding:  26px; 0 0 0; 
    text-indent: -9999px; 
    position: absolute; 
    right:  0; 
    z-index:  2 
} 


.phoneNumber a { 
    background: #101112 url("../img/phone.png") 0 0px no-repeat; 
    height:  36px; 
    width:  174px; 
    display:  block; 
    float:  right; 
    margin:  0; 
    padding:  26px; 0 0 0; 
    text-indent: -9999px; 
    position: absolute; 
    right:  0; 
    z-index:  2 
} 

.phoneNumber a:hover { 
    background: #101112 url("../img/phone.png") 0px -36px no-repeat; 
    height:  36px; 
    width:  174px; 
    display:  block; 
    float:  right; 
    margin:  0; 
    padding:  26px 0 0 0; 
    text-indent: -9999px; 
    position: absolute; 
    right:  0; 
    z-index:  2 
}

출처

2011-11-21 user1038814

/* 
.phoneNumber { 
    background: #101112 url("../hop.gif") 0px 0px no-repeat; 
    height:  36px; 
    width:  174px; 
    display:  block; 
    float:  right; 
    margin:  0; 
    padding:  26px 0 0 0; 
    text-indent: -9999px; 
    position: absolute; 
    right:  0; 
    z-index:  2 
} 

*/ 
.phoneNumber a { 
    background: #101112 url("../hop.gif") 0px 0px no-repeat; 
    height:  36px; 
    width:  174px; 
    display:  block; 
    float:  right; 
    margin:  0; 
    padding:  26px 0px 0px 0px; 
    text-indent: -9999px; 
    position: absolute; 
    right:  0; 
    z-index:  2 
} 

.phoneNumber a:hover { 
    background: #101112 url("../hop.gif") 0px -36px no-repeat; 
    height:  36px; 
    width:  174px; 
    display:  block; 
    float:  right; 
    margin:  0; 
    padding:  26px 0px 0px 0px; 
    text-indent: -9999px; 
    position: absolute; 
    right:  0; 
    z-index:  2 
}

과 :

<span class="phoneNumber"><a href="#" title="">897698897</a></span>

편집 :이 부분이 잘못했기 때문에

padding:  26px; 0 0 0;

에주의, 브라우저가 그 라인을 버려!

출처

2011-11-21 12:52:04 undone

내 컴퓨터에서 이미지를 테스트하도록주의를 기울여야합니다. – undone

도움 주셔서 대단히 감사합니다. 매우 감사. – user1038814

귀하의 CSS 선택기해야한다 :

a.phoneNumber

그리고

a.phoneNumber:hover

출처

2011-11-21 12:44:01 Filip

사용 .phonenumber:hover 대신 .phonenumber a:hover.

또한 .phonenumber a이 작동하지 않습니다. 실제로 사용하려면 a.phonenumber이어야합니다.

출처

2011-11-21 12:46:31 v42

CSS 배경을 사용하여 이미지 호버가 작동하지 않습니다.

답변

관련 문제