Закругленные вкладки CSS

Question

Я создал несколько закругленных навигационных вкладок, используя CSS, и у меня возникают проблемы при реализации n hover.

Во-первых, вот ссылка на сайт Вкладки , что довольно сложно объяснить. Пожалуйста, наведите курсор на левую сторону вкладок, чтобы понять мою проблему. Я объяснил ниже.

У меня есть фоновое изображение, установленное на #navigation li элементов, это содержит левый боковой угол, и затем у меня есть второе фоновое изображение (правый угол), это устанавливается с помощью #navigation a.

Однако, когда я наведу курсор мыши на левую сторону вкладки, отображается только небольшой кусочек фона, я предполагаю, что это потому, что только область li находится над ней. Очевидно, мне бы хотелось, чтобы вся вкладка выделялась так же, как и при наведении на остальную часть.

Это было довольно сложно объяснить, поэтому, если вам нужно допросить меня, чтобы понять проблему, пожалуйста, сделайте.

Answer 1

Пара вещей:

Устраните проблему, сняв отступ с

и вернув его на ребенка - пространство, которое они занимают, должно быть одинаковым для выравнивания парения.

Теперь у вас другая проблема, левый угол не отображается. Исправьте это, сделав цвет фона для a и a:hover равным transparent вместо цветов - теперь

может просвечивать.

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

редактировать: описанный роллингер без смены изображения

здесь

Answer 2

Или вы можете заменить свои li: hover и a: hover на эти:

#navigation li:hover {
        background: #009BDA url(images/tab_left_on.gif) no-repeat top left;
        cursor : pointer;
        }

#navigation li:hover a {
        background: #009BDA url(images/tab_right_on.gif) no-repeat top right;
        color: #FFF;
}

Обратите внимание, что он может не работать IE6.

Answer 3

С jQuery это супер просто! но вы даже можете попробовать масштабируемую коробку:

http://www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/

и затем измените фоновое изображение при наведении.