html - 如何仅垂直偏移背景位置？

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 偏移量，background-position: 0 -60px对于 .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;
}