Переключение между наведением / активным элементом меню в HTML / CSS

Question

Переключение между наведением / активным элементом меню в HTML / CSS

0

Можно ли удалить "активные" -class из пунктов меню при наведении другого пункта меню?

Там рабочая скрипку здесь. По умолчанию кнопка "домой" имеет "активную" -class, всякий раз, когда она зависает над другим элементом меню, я хотел бы удалить этот "активный" -class. Таким образом, только 1 пункт меню имеет оверлей меню на нем. Это легко достижимо с помощью CSS? Или мне нужен какой-то причудливый JavaScript?

Следующий фрагмент кода поместит кнопку наложения поверх пунктов меню:

#menu li a.active,
#menu li a:hover{
    text-decoration: none;
    background: url('../images/menu_button_overlay.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 30px 10px;
}

Благодарю!

Velth 20 март 2014, в 14:57

Источник

0

"Или мне нужен какой-нибудь причудливый JavaScript?" ...Да.
Paulie_D 20 март 2014, в 13:01

Теги:

html

css

html5

css3

3 ответа

0

Вам понадобится javascript (или, скорее, JQuery)

JQuery

$("li a").click(function () {
  $(this).toggleClass("active");
  $("li a").not(this).removeClass("active");
});

Демо-версия JSFiddle

Paulie_D 20 март 2014, в 11:51

0

Это не совсем то, что я упомянул. Мне нравится наводить курсор на пункты меню, а затем видеть только 1 оверлей. Когда я покидаю пункты меню, я хочу восстановить старый активный класс.
Velth 20 март 2014, в 13:48

0

Вам нужно использовать Fancy Javascript. Но даже тогда, я сомневаюсь, это не будет работать, потому что после удаления active класса из дома любой другой пункт меню будет иметь накладку только пока вы не hover его или нажать на него. Если вы не нажмете на какой-либо другой пункт меню, тогда в конце не будет наложения для любого элемента меню.

Rishabh Shah 20 март 2014, в 10:15

Ещё вопросы

"Или мне нужен какой-нибудь причудливый JavaScript?" ...Да.
Это не совсем то, что я упомянул. Мне нравится наводить курсор на пункты меню, а затем видеть только 1 оверлей. Когда я покидаю пункты меню, я хочу восстановить старый активный класс.

secelite · Accepted Answer · 2014-03-20T10-55-00.000Z

Это возможно с помощью CSS.

#menu:hover .active {
     background: none;   
}

играть на скрипке

Это более или менее то, что я имею в виду, спасибо! Несмотря на то, что вы находитесь в меню div и не касаетесь какого-либо пункта меню, он все равно удалит оверлей. Так что это не 100% решение.