배경 위치를 세로로 만 오프셋하는 방법은 무엇입니까?

Question

<ul>을 사용하여 탐색 바를 만들고 있습니다. CSS 코드는 다음입니다 :

.nav { 
    list-style: none; 
    background: url(/images/nav.png) no-repeat; 
    width: 666px; 
    height: 60px; 
} 
    .nav li { 
    font-size: 0px; 
    background: url(/images/nav.png) no-repeat; 
    width: 120px; 
    height: 60px; 
    display: block; 
    float: left; 
    position: relative; 
    } 
    .nav .navhome { 
    background-position: -31px 0; 
    left: 31px; 
    } 
    .nav .navA { 
    background-position: -152px 0; 
    left: 32px; 
    } 
    .nav .navB { 
    background-position: -273px 0; 
    left: 33px; 
    } 
    .nav .navC { 
    background-position: -394px 0; 
    left: 34px; 
    } 
    .nav .navD { 
    background-position: -515px 0; 
    left: 35px; 
    } 
    .nav .navhover { 
    background-position-y: -60px; 
    } 
    .nav .navcurrent { 
    background-position-y: -120px; 
    cursor: default; 
    pointer-events: none; 
    } 

마우스 하나 개의 버튼을 놓을 때, 클래스 .navhover 추가하는 것도 jQuery를 기능이 있습니다, 배경 이미지가 이동 될, 이렇게의 다른 부분을 보여줄 수 있도록 전체 이미지; 클래스 .navcurrent (현재 페이지)입니다.

MAC에서 구현하고 Chrome에서 테스트했습니다. 그러나 코드를 검증했을 때 background-position-y이 표준이 아님을 발견했습니다 (실제로이 5 개의 버튼에는 background-position-x도 사용되었습니다). 각 버튼에 대해 x- 오프셋이 있으므로 background-position: 0 -60px (.navhover)은 항상 첫 번째 것을 표시합니다. 또한 background-position: inherit -60px;을 시도했지만 작동하지 않습니다. 그렇다면 백그라운드 위치 만 수직으로 이동하는 방법은 무엇입니까?

또 다른 질문 인 pointer-events도 표준이 아니며 파이어 폭스와 오페라에서는 작동하지 않습니다. 클래스 .navcurrent 버튼의 클릭 기능을 사용 중지하는 다른 방법이 있습니까?

Answer 1

는 .navcurrent에 클릭 이벤트를 방지하기위한 방법은 다음과 같습니다

$(".navcurrent").click(function(e) { 
    e.preventDefault(); 
}); 

와 배경 위치, 왜 당신은 각 클래스의 인스턴스를 가질 수 없습니다에 대한

:

.nav .navD:hover { 
    background-position: -515px -60px; 
}