Изменение цвета текста активного элемента меню с помощью CSS

Мне нужна ваша помощь в изменении цвета текста активного элемента меню на моем веб-сайте, используя CSS.Изменение цвета текста активного элемента меню с помощью CSS

(Это сайт Joomla, и я модифицирую стандартный шаблон рамки Gantry для наших нужд).

Вот CSS для элемента активного меню ...

.gf-menu.l1 > li.active { 
     background: none; 
     color: #19D57E; 
     border: none; 
     border-bottom: 3px solid #19D57E; 
     border-radius: 0px; 
     -webkit-box-shadow: none; 
     -moz-box-shadow: none; 
     box-shadow: none; 
     margin: 0 auto; 
     padding-top: 1px; 
    }

А вот CSS для элементов меню пассивных ...

.gf-menu .item { 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 13px; 
     line-height: 21px; 
     color: #555555; 
     padding: 4px 8px; 
     text-align: left; 
     text-shadow: 0px 0px 0 transparent; 
     text-decoration: none; 
     display: block; 
     outline: 0; 
     cursor: pointer; 
     font-weight: bold; 
    }

То, что я хочу, чтобы цвет текста в активном пункте меню будет зеленым (# 19D57E).

Активный элемент меню уже показывает зеленую линию внизу, но цвет текста элемента меню остается черным, как в пассивных пунктах меню. Как вы можете видеть, я указал текст цвета, но по какой-то причине он этого не делает.

Что я делаю неправильно?

Если вы хотите, чтобы посмотреть на сайте, пожалуйста, перейдите на http://www.barrylong.tv/index.php/home

Спасибо большое!

Hector

источник

2013-09-28 Hectoritobh

Я думаю, что вы ошибались в отношении активного и зависания, используйте зависание вместо активного –

@NishadNichoos Это не сработает, потому что '.active' является классом элемента DOM и, кроме того, наведение означает, что происходит при переходе мыши. –

Это CSS необходимо:

.gf-menu.l1 > li.active a { 
     color: #19D57E; 
}

Обратите внимание на a после .active

Надеются, что это помогает

источник

2013-09-28 19:46:20 Lodder

Привет, Хозяин, спасибо. Это сработало красиво. Однако у меня сейчас небольшая проблема: выпадающие меню в активном меню имеют тот же цвет, что и фон, поэтому вы не можете их видеть. Как сохранить цвет активных выпадающих меню в черном (# 555555) при пассивном и белом цвете при зависании? – Hectoritobh

@Hectoritobh - для этого вы можете использовать следующее для css. Не забывайте важный бит после цвета '.gf-menu .dropdown ul li .item {color: # 555555! Important; } ' – Lodder

Большое спасибо!Это делает пункты меню черными снова (когда пассивно), но когда они зависают, они остаются черными. У меня уже был CSS, чтобы отображать элементы меню белые, когда они зависали, но кажется, что ваша команда CSS перекрывает это: '.gf-menu li: hover, .gf-menu li.active: hover {border: 1px solid # 19D57E; background: # 19D57E; color: #ffffff; padding-top: 1px; border-radius: 4px;} 'Что вы предлагаете мне делать? – Hectoritobh

добавить это в таблице стилей .gf-menu > .active > a { color: #19D57E; }.

источник

2013-09-28 19:47:15

Я думаю, вы должны изменить цвет элемента .item в элементе .active li-element. На данный момент вы пытаетесь изменить цвет li-элемента, а не ссылки.

.gf-menu.l1 > li.active .item { 
    /* ... */ 
    color: #19D57E; 
    /* ... */ 
}

источник

2013-09-28 19:47:23

Найти блок CSS: для item101 active last

Обратите внимание на ваш источник для "дома":

<li class="item101 active last"> 

<a class="item" href="/index.php/home">Home </a> </li>

Вы увидите свойство цвет текста изменить. Причина, по которой вы работаете, не работает, так это то, что вы меняете неправильные свойства блока CSS.

источник

2013-09-28 19:49:36 OBV

Изменение цвета текста активного элемента меню с помощью CSS

ответ

Смежные вопросы