Как сместить фоновое положение только по вертикали? - PullRequest
Новая
       10

Как сместить фоновое положение только по вертикали?

1 голос
/ 08 декабря 2011

Я создаю панель навигации, используя <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 не является стандартным (на самом деле, я также использовал background-position-x для этих 5 кнопок). Поскольку для каждой кнопки существует смещение по x, background-position: 0 -60px для .navhover всегда будет отображать первую. Кроме того, я попытался background-position: inherit -60px;, и это не работает. Так как же только вертикально переместить фоновую позицию?

Другой вопрос, pointer-events также не является стандартным, и он не работает в Firefox и Opera. Есть ли альтернативный способ отключить функцию нажатия на кнопку с классом .navcurrent?

1 Ответ

0 голосов
/ 09 декабря 2011

Для предотвращения события клика на .navcurrent: 

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

и для фоновой позиции, почему у вас не может быть экземпляров для каждого класса: 

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