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的{{1}}将始终显示第一个按钮。此外，我尝试了.navhover，但它不起作用。那么如何只垂直移动背景位置？

另一个问题，background-position: inherit -60px;也不是标准的，它在firefox和opera中不起作用。是否有另一种方法可以禁用类pointer-events按钮上的单击功能？

Answer 1

防止.navcurrent上的点击事件：

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

对于背景位置，为什么不能为每个类都有实例：

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

如何垂直偏移背景位置？

1 个答案: