選擇帶邊框懸停的主持

我有一個簡單的導航列表。典型設置，其中活動頁面li項目具有「活動」標識。我希望能夠保持活動頁面爲鏈接，在下面有一個實心的邊框，但在沒有「活動」ID的情況下在li項目上有一個虛線邊框。選擇帶邊框懸停的主持

如何在沒有使用虛線border-bottom覆蓋活動標籤的情況下實現此目的？

下面是列表中的代碼：

<div id="nav_bar"> 
    <ul id="nav_list"> 
    <li id="active"><a href="#">About</a></li> 
    <li><a href="#">Design</a></li> 
    <li><a href="#">Photography</a></li> 
    </ul> 
</div>

jsFiddle Example

來源

2013-07-05 Brant Barton

你能告訴我們你到目前爲止沒有工作嗎？ –

你也可以提供CSS嗎？更好的是，一個[jsfiddle]（http://jsfiddle.net）的例子？ – Dom

這是我正在嘗試，沒有工作http://jsfiddle.net/FaESR/ –

由於邊界已經被應用到每個a，使:hover僅適用於li不在#active使用:not()。

變化：

#nav_list li a:hover{ 
    border-bottom:1px dashed #666; 
} 

#active a{ 
    border-bottom:1px solid #666; 
} 

#nav_list li#active a:hover{ 
    border-bottom:1px dashed #666; 
}

要：

li#active a{ 
    border-bottom:1px solid #666; 
} 

#nav_list > li:not(#active) a:hover{ 
    border-bottom:1px dashed #666; 
}

DEMO： http://jsfiddle.net/FaESR/1/

注：請確保使用class，而不是id如果你打算在具有超過一個實例#active，因爲id必須是唯一的！

快樂編碼！

來源

2013-07-05 17:22:11 Dom

謝謝！我想知道是否有某種排除標籤的方法 –

選擇帶邊框懸停的主持

回答

相關問題