如何垂直偏移背景位置？

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; 
    } 

还有jQuery函数，当鼠标在一个按钮悬停，类.navhover被添加，使得背景图像将是向上移动，并且因此显示出的不同部分整个图像;等级.navcurrent（当前页）。

我在MAC上实现了它，并在Chrome中进行了测试。但是当我验证代码时，我发现background-position-y不是标准的（实际上，我也对这5个按钮使用background-position-x）。由于每个按钮都有x偏移，因此对于.navhover将始终显示第一个按钮。另外，我试过background-position: inherit -60px;，它不起作用。那么如何才能垂直移动背景位置呢？

另一个问题，pointer-events也不是标准的，它不适用于firefox和opera。是否有一种替代方法来禁用类.navcurrent按钮上的点击功能？

Answer 1

要防止.navcurrent单击事件：

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

和背景的位置，你为什么不能为每个类的实例：

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