2010-10-03 86 views
0

我有這個li名單,但我想知道如何獲得當前頁面的鏈接有白色(li:active在CSS中使用活動和懸停鏈接?

CSS的背景:

#layout-three-liquid2 #section-navigation ul 
{ 
    margin: 0; 
    padding: 0; 
} 

#layout-three-liquid2 #section-navigation ul li 
{ 
    margin: 0 0 0em; 
    padding: 0; 
    list-style-type: none; 
} 
#layout-three-liquid2 #section-navigation ul li:hover{ 

    background-color:white; 



} 
#layout-three-liquid2 #section-navigation ul li a:active{ 

    background-color:white; 



} 

HTML:

<ul> 
    <li><a active="current" href="#page1">Home</a></li> 
    <li><a href="#page3">Replies</a></li> 
</ul> 

但它不工作,我該如何解決這個問題?

+0

你是否100%確定你在'#layout-three-liquid2#section-navigation'內?請顯示完整的HTML – 2010-10-03 19:03:26

+0

':active'表示「正在激活(例如通過點擊)」,而不是「具有解析爲當前頁面的URI的href屬性」。這與不存在的「主動」屬性無關。 – Quentin 2010-10-03 19:05:12

+0

編輯了css代碼,向你展示整個場景 – getaway 2010-10-03 19:18:48

回答

2

您的代碼li:active無效/正確。你需要指定一個類,像這樣在你的CSS的鏈接:

#section-navigation ul li a.current { 
    background-color:white; 
} 
+0

這個deos不工作,更新css代碼,向你展示整個ul css類 – getaway 2010-10-03 19:19:09

+0

@getaway:根據你的代碼/ css更新。 – Sarfraz 2010-10-03 19:23:04

+0

@sarfaz此作品謝謝,但它只突出鏈接,我需要突出整個李!它看起來如此醜陋哈哈:))+1 upvote from me – getaway 2010-10-03 19:30:00

1

你不能這樣做<a active="current">

因爲active不是<a>元素的有效屬性。

嘗試使用class=current代替。

然後在你的CSS可以針對與

#layout-three-liquid2 #section-navigation ul li a.current { 
    ... 
} 
1

你濫用CSS僞類的元素。 :active:hover是特殊值,當鏈接被點擊(具有焦點)時以及當用戶將鼠標指針移動到其上方時使用這些值。

CSS類,而應使用:
CSS:

#layout-three-liquid2 #section-navigation ul li a.current{ 

    background-color:white; 
} 

HTML:

<ul> 
    <li><a class="current" href="#page1">Home</a></li> 
    <li><a href="#page3">Replies</a></li> 
</ul> 
+0

這不工作抱歉 – getaway 2010-10-03 19:16:52

0

需要注意的是:活躍並不代表你當前所在的頁面,它只是意味着該鏈接正在被點擊。 (它可能也適用於框架集)

你必須做一些服務器端腳本來設置類爲link_active或類似的東西。