Наведение на пункт меню

Ylik · October 29, 2012

Здравствуйте! Хочу спросить у знающих людей такой вопрос: каким образом может меняться цвет пункта меню при наведении?

Вот, например, простое двухуровневое меню:

<body>

<div id="nav">
<ul>
<li><a href="#">Меню</a>
   <ul>
   <li><a  href="#">Меню</a></li>
   <li><a  href="#">Меню</a></li>
   <li><a  href="#">Меню</a></li>
   <li><a  href="#">Меню</a></li>
   </ul>
</li>   
</ul>

</body>

Если в стилях написать:

#nav ul li ul li:hover a {
	color:#F00;
}

то цвет будет меняться только в пунктах подменю.

А если написать так:

#nav ul li:hover a {
	color:#F00;
}

то цвет будет меняться сразу во всех пунктах одновременно.

Скажите, пожалуйста, как решить такой вопрос? Это мое первое html-меню. Спасибо!

Alex Shnayder · October 29, 2012

#nav li:hover > a

Либо вешать hover на сами ссылки.

Edited October 29, 2012 by Alex Shnayder

Ylik · October 30, 2012

У меня сработало только так, но получилось все-равно не как надо

#nav ul li:hover > a

Но уже ближе к цели)))

Подумаю еще

Alex Shnayder · October 30, 2012

Как это "не как надо"?

Это правило будет применяться к ссылкам, которые являются дочерними (т.е. напрямую вложены) по отношению к li. Остальные ссылки-потомки не изменятся. Вам как-то не так надо?

Да, кстати, небольшие советы по коду.

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

Во-вторых, постарайтесь избегать лишней вложенности селекторов. Например,

#nav ul li ul li:hover a

можно было бы спокойно заменить на

#nav li:hover a

Код будет меньше зависеть от структуры, да и скорость селекторов немного возрастет.

Ylik · October 30, 2012

Спасибо за советы!

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

Alex Shnayder · October 30, 2012

Ну да, подменю ведь является частью родительского li. По-моему, это правильное поведение с точки зрения юзабилити.

Чтобы сделать по-вашему, нужно ловить hover на самих ссылках и изменить правило для отображения подменю:

#nav a:hover {
    color: #f00;
}

#nav a:hover + ul,
#nav a + ul:hover {
    display: block;
}

Получится что-то вроде этого.

Edited October 30, 2012 by Alex Shnayder

Ylik · October 30, 2012

Ух-ты! Здорово! Сложная пока, конечно, для меня конструкция, сама бы не догадалсь.

Вот это - как раз то, что я хотела! Спасибо вам огромное!!! :yahoo:

Sign In

Наведение на пункт меню

Question

Ylik

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Alex Shnayder

Link to comment

Share on other sites

Ylik

Link to comment

Share on other sites

Alex Shnayder

Link to comment

Share on other sites

Ylik

Link to comment

Share on other sites

Alex Shnayder

Link to comment

Share on other sites

Ylik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information