Многоуровневое навигационное меню Проблема с наведением

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

ul#css3menu ul span {
    background-image: url("images/arrowsub.png");
    padding-right: 28px;
}
ul#css3menu ul span:hover {
    background-image: url("images/arrowsubhover.png");
    padding-right: 28px;
}

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

Почему цвет фона родительского li не теряет своих правил наведения, а стрелка теряет?

вы можете увидеть поведение и код с помощью этого скрипт js


person Chris L    schedule 06.04.2014    source источник
comment
спасибо за редактирование. я буду размещать такой код в будущем   -  person Chris L    schedule 07.04.2014


Ответы (2)


В вашем случае лучше назначить состояние наведения в основном контейнере элемента списка, а не просто нацеливаться на конкретный элемент в вашем элементе списка меню. В вашем случае измените строку 196 на скрипте js на .submenu li:hover span . Даже если вы перемещаетесь на уровень ниже, чтобы получить доступ к дочернему элементу меню, по умолчанию вы все еще наводите курсор на родительский элемент.

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

person ramesh    schedule 06.04.2014
comment
Я не мог заставить что-либо работать с .submenu, но часть li:hover span вашего селектора дала мне идею, и я заставил ее работать, изменив строку 196 на ul#css3menu ul li:hover span - person Chris L; 07.04.2014
comment
о, чувак, и это также устранило проблему, с которой я столкнулся в этот вопрос, над которым я работал с отступами и полями. теперь я могу удалить этот код. сладкий! - person Chris L; 07.04.2014
comment
трудно сказать, кто должен получить признание за принятый ответ. предложение подменю, похоже, не сработало (может быть, моя вина в том, что я не реализовал его должным образом), но вы были правы в отношении стиля зависшего li вместо span - person Chris L; 07.04.2014
comment
Причина, по которой это не сработало, заключается в том, что вы использовали идентификатор в строке 192 для стиля, которым вы занимаетесь, и идентификатор всегда будет переопределять класс. Если вы измените строку 192 на .submenu ul span, это сработает. Я рекомендую вам прочитать эту статью stuffandnonsense.co.uk/archives/css_specificity_wars.html - person ramesh; 07.04.2014
comment
Я думаю, что могу запутать вас еще больше. Я внес изменения, о которых говорил, на codepen codepen.io/nighrage/pen/kJnCH. Проверьте строку 192 на наличие изменений, о которых я говорил. - person ramesh; 07.04.2014
comment
ага, да. Я вижу это сейчас. Спасибо. Я постараюсь стилизовать больше классов и буду более осознанно относиться к наследованию. - person Chris L; 07.04.2014

Похоже, что правило, влияющее на цвет фона при наведении, ul#css3menu ul li:hover>a.

Поскольку ul#css3menu ul li:hover обнаруживает наведение курсора на любой элемент li, являющийся дочерним элементом ul#css3menu ul, а подменю 2-го уровня также состоит из li, состояние li 1-го уровня сохраняется при наведении курсора на 2-й элемент. -level li, потому что исходное правило все еще действует (поскольку оно активно, когда вы наводите курсор на любой дочерний элемент li, включая li второго уровня).

Когда ul#css3menu ul li:hover равно true, стиль CSS впоследствии применяется к прямому дочернему элементу a (а не к li), чтобы дать вам полное правило ul#css3menu ul li:hover>a. Меня это тоже какое-то время смущало, потому что обнаружение происходит отдельно от применения стилей. Надеюсь это поможет.

person Bill Mei    schedule 06.04.2014
comment
Я следую за тобой. это полностью объясняет, почему кнопка остается в состоянии наведения даже при наведении на второй уровень. О хват! и теперь я понимаю, почему это объяснение также объясняет, почему изменение строки 196 на ul#css3menu ul li:hover span решает мою проблему. Я только стилизовал span в состоянии наведения, поэтому я не зависал на span на 2-м уровне li, поэтому терял стрелку. теперь, когда я стилизую span наведенного li, так как я все еще нахожусь на li, я не теряю стрелку. это правильно? Я надеюсь, что это так. Кажется, я начинаю разбираться в этом css! ууууу! - person Chris L; 07.04.2014