CSS 이미지 롤오버 효과

Question

I 롤오버 효과를 만드는 시도에서 다음과 같은 CSS 있습니다

#arrow { 
    position:absolute; 
    left:540px; 
    top:150px; 
    width:220px; 
    height:120px; 
} 
#arrow a{ 
    display: block; 
    width:220px; 
    height:120px; 
    text-decoration: none; 
    background: url("images/arrow.jpg"); 
    background-position: 0 -120px; 
    } 
#arrow a:hover { 
    background-position: 0 0; 
    } 

그리고 나중에, div 태그 : 그러나

<div id="arrow"> 
    <a href="/arrow/arrow.htm"></a> 
</div> 

을 때 이미지를 통해 내 마우스를 움직일 링크의 배경 위치는 변경되지 않습니다. 생각?

Answer 1

background-repeat: no-repeat-#arrow a을 더하십시오.

Answer 2

작동하지만 배경이 반복되므로 전혀 작동하지 않는 것처럼 보일 수 있습니다. 따라서 no-repeat 또는 background-repeat를 설정하거나 url 설정을 제거한 다음 호브에만 추가하십시오