Закругленные вкладки CSS
Я создал несколько закругленных вкладок навигации с помощью CSS, и у меня возникли проблемы при реализации hover.
Во-первых, это ссылка на сайт Вкладки, так как это довольно сложно объяснить. Пожалуйста, наведите курсор на левую часть вкладок, чтобы понять мою проблему. Я объяснил ниже.
У меня есть фоновое изображение, установленное для элементов #navigation li, оно содержит левый боковой угол, а затем у меня есть второе фоновое изображение (правый угол), которое устанавливается с помощью #navigation a.
Однако при наведении указателя мыши на левую часть вкладки отображается только небольшой фрагмент фона, я полагаю, это связано с тем, что наведена только область li. Очевидно, я хотел бы, чтобы вся вкладка выделялась, как при наведении курсора на остальную часть.
Это было довольно сложно объяснить, поэтому, если вам нужно задать мне дополнительные вопросы, чтобы разобраться в проблеме, пожалуйста, ответьте.
Нет, еще нет, я собираюсь немного прочитать материал, опубликованный annakata.
Ответы 3
Пара вещей:
Исправьте проблему, сняв отступ с <li> и вернув его на дочерний <a> - пространство, которое они занимают, должно быть одинаковым, чтобы выровнять наведение.
Теперь у вас другая проблема, левый угол не отображается. Исправьте это, сделав цвет фона для a и a:hover равным transparent вместо цветов - теперь <li> может просвечивать.
Наконец, я предлагаю вам полностью изменить поведение с другого изображения на то же изображение с другой позицией фона, чтобы ролловер загружался незаметно.
редактировать: css ролловер без подкачки изображений, описанный здесь
ithankyou - достаточно легко увидеть свой путь через эти вещи, если вы представите, что создаете страницу как кусочки физической бумаги, я только что сделал один из этих кусочков ацетатом :)
С jQuery это очень просто! но вы даже можете попробовать масштабируемую коробку:
http://www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/
а затем измените фоновое изображение при наведении курсора.
Или вы можете заменить 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 может не работать.
определенно не будет работать в IE6 (li: hover не поддерживается), но это не всегда проблема
Когда вы говорите, что решения не будут работать в IE6. Вы говорите, что проблема будет просто в том, что у меня есть сейчас, или после реализации ваших методов она будет выглядеть ужасно неправильно в IE6?
Ни ваша страница, ни мое решение не будут работать, поскольку li: hover не поддерживается в IE6.
Хорошо я понял. Спасибо за помощь.
но это невозможно исправить для IE6, вам придется использовать JS-решение или другой дизайн - доля рынка для этого браузера сейчас настолько мала, что мне было бы все равно, если вам не нужно
Вы исправили эту проблему на своем сайте?