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

StackOverflow https://stackoverflow.com/questions/400843

  •  03-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

Это было полезно?

Решение

Пара вещей:

Исправьте проблему, убрав отступы из <li> и поместив их обратно в дочерний элемент <a> — пространство, которое они занимают, должно быть одинаковым, чтобы при наведении курсора было выровнено.

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

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

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

Другие советы

С 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 может не работать.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top