CSS Navigation Sprite - Нечетные фигуры (не квадратные)

Question

У меня обычно нет проблем с созданием CSS-спрайтов, но это меня озадачило ... и я не уверен, как это решить.По сути, у меня есть спрайт навигации, который выглядит следующим образом:

Я использую стандартное соглашение о размещении их в тегах <li>, таких как:

<li class="welcome"><a href="#" title="welcome">welcome</a></li>

И затем применение CSS для настройки положения фона:

#navigation li.welcome a {
  width:155px;
  background-position:-0px -46.5px; }

Конечно, я не думал об этом, но проблема возникает при наведении курсора.Поскольку вы можете определять только «квадратные» области, при наведении курсора на элемент «синее» состояние наведения переносится на следующий элемент навигации.

Тогда я подумал, что мне придется создавать отдельные изображения для каждого элемента ... но это тоже не сработает из-за перекрывающихся секций стрелок.

Может быть, мне придетсяотделить "промежуточный" разделитель стрелок?Я действительно не уверен.

Я в тупике.Есть идеи?

Answer 1

Я думаю, что вы правы в том, что вам нужно создать «умный» образ, который бы отвечал всем вашим требованиям.

Сложно объяснить словами, вот ссылка на пример: http://www.alistapart.com/d/sprites/ala-blobs2.html

Вот ссылка на то, как это делается (прокрутите вниз до «Неправильные формы»): http://www.alistapart.com/articles/sprites

Answer 2

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

Answer 3

Вместо одного ряда «активных» спрайтов создайте два и активируйте их альтернативно, например:

  active > inactive > active > inactive ...
  inactive > active > inactive > active ...

Таким образом, вы всегда можете вырезать спрайт;вам просто нужно добавить к значению Y, если индекс вашего элемента "нечетный" (index & 1 == 1).

Answer 4

Вы можете расширить свой спрайт и заменить состояние наведения на 5 отдельных строк состояния наведения, каждая из которых имеет только одну синюю кнопку с отдельной позицией состояния наведения для каждого элемента. Размер файлов не должен быть слишком большим.