如何禁用我的css sprite導航欄懸停狀態，因爲它處於活動狀態？

Question

我一直在開發一個使用css sprite導航欄的網站。

已被設置爲活動的一個部分的css如下所示。

ul#navigation li#navigation-1 a 
{ 
background:url(images/btn_navbar.png) no-repeat -1px 0; 
width:90px; 
} 

ul#navigation li#navigation-1 a.current 
{ 
background-position:-1px -90px; 
} 

ul#navigation li#navigation-1 a:active,ul#navigation li#navigation-1 a:hover 
{ 
background-position:-1px -45px; 
} 

我使用以下HTML/PHP設置活動狀態的其他部分

<li id="navigation-8"><a href="<?php $page = get_page_by_title('Contact'); echo get_permalink ($page ->ID); ?>" title="CONTACT" <?php if (is_page('Contact')) { echo 'class="current"' ; } ?>><span>CONTACT</span></a></li> 

的問題是，當前的「活性」部分仍然具有：這導致閃爍懸停屬性並且不希望的去除活動狀態直到鼠標離開該部分。

理想情況下，我想簡單地刪除當前選定部分的懸停屬性。

這怎麼可能？我可以做一些jquery巫術嗎？

非常感謝。

羅伯特

Answer 1

您可以爲指定的僞類「當前」鏈接：

#navigation-1 a.current, 
#navigation-1 a.current:hover, 
#navigation-1 a.current:active { 
    background-position:-1px -45px; 
} 

我還建議您將這些樣式放在其他#navigation-1 a以下，因爲它們將覆蓋它們從中繼承的樣式。

我想指出，沒有必要用2個ID編寫選擇器。 ID始終是唯一的，所以不需要指定元素，因爲它們永遠不會有兩個元素（有效的 html）。

這些都是相同的（假設你的標記保持不變，你有沒有未使用的CSS）：

ul#navigation li#navigation-1{} 
#navigation li#navigation-1{} 
#navigation-1{} 

Answer 2

給非當前連接的一類，以及通過：

if (is_page('Contact')) 
    { echo 'class="current"' ; } 
else 
    { echo 'class="notcurrent"' ;} 

然後你的CSS改成這樣：

ul#navigation li#navigation-1 a.notcurrent:active, 
ul#navigation li#navigation-1 a.notcurrent:hover 
{ 
    background-position:-1px -45px; 
}