使用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

非常感謝！

赫克託

來源

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

嗨Lodder，謝謝。這工作很好。但是，我現在遇到了一個小問題：活動菜單的下拉菜單項與背景顏色相同，因此您無法看到它們。如何保持活動下拉菜單項目的顏色爲黑色（＃555555），被動時保持白色，並且保持徘徊狀態？ – Hectoritobh

@Hectoritobh - 你可以使用下面的css。不要忘了顏色'.gf-menu .dropdown ul .item {color：＃555555！important; }' – Lodder

非常感謝！這使得菜單項再次變黑（被動時），但是當盤旋時，它們保持黑色。我已經有一些CSS在盤旋時將菜單項變爲白色，但看起來您的CSS命令否決了：'.gf-menu li：hover， .gf-menu li.active:hover {border：1px solid＃19D57E;背景：＃19D57E;顏色：#ffffff; padding-top：1px; border-radius：4px;}'你建議我做什麼？ – Hectoritobh

在樣式表.gf-menu > .active > a { color: #19D57E; }添加此。

來源

2013-09-28 19:47:15

我認爲你必須改變.active li元素中.item元素的顏色。目前你正在嘗試改變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更改活動菜單項的文本顏色

回答

相關問題