導航欄着色鏈接

-1

我遇到了我的導航欄問題，並且在此停留了幾個小時。我的導航條是這樣的：導航欄着色鏈接

<div id="pages"> 
     <?php wp_nav_menu();?> 
    </div>

很簡單的WordPress的導航欄。 Wordpress會自動給這個菜單上的每個頁面添加一個類名，例如.page-item-30也會給wordpress所有的類.page-item。

我想要實現的是當我懸停1頁時，背景變爲紅色（＃ff0000），字體顏色變成白色;我的CSS看起來像這樣

#pages li{ 
display: inline; 
float: left; 
height: 20px; 
padding: 5px; 
margin: 0px; 
margin-top: -17px; 
transition: all 0.2s ease-in-out; 
} 
#pages li:hover{ 
background-color: #ff0000; 
} 
/** 
.page-item-27:hover a{ 
color: white; 
transition: all 0.2s ease-in-out; 
} 
.page-item-2:hover a{ 
color: white; 
transition: all 0.2s ease-in-out; 
} 
.page-item-21:hover a { 
color: white; 
transition: all 0.2s ease-in-out; 
} 
**/ 
.page-item:hover a { 
color: white; 
transition: all 0.2s ease-in-out; 
} 

.current_page_item { 
background-color: #ff0000; 
} 
.current_page_item a{ 
color: white; 
}

現在，我嘗試使用。第項-27左右的時候字體顏色有改變，但，這是非常不可靠的，因爲它依賴於頁面的右側ID做定義。所以，如果我有一個新的頁面，ID不在我的CSS中，我的導航無法正常工作。

有沒有改變字體顏色的方法？

在我目前的CSS有這

.page-item:hover a { 
color: white; 
transition: all 0.2s ease-in-out; 
}

這在我的腦海裏應該工作，但事實並非如此。

如果您完全不瞭解danielps1.de，則可以查看我的實時頁面。只需將鼠標懸停我的導航左側

感謝您的幫助

來源

2014-06-15 gempir

如果你想鏈接到一個演示（這是非常有用的），請鏈接到一個演示網站，如[JS小提琴]（http://jsfiddle.net/），或類似，否則只要你更正你的問題鏈接，顯示問題，*停止顯示問題*。另外，你能否展示你想要的風格的相關HTML，這使得我們的問題變得更加清晰。 –

將來會做，但將wordpress整合到jsFiddle是相當複雜的，如果我不能使用WordPress的功能，我會錯過很多內容，其中有問題。 – gempir

正如瀏覽器所看到的HTML一樣，否則你的css將無法進行預處理。 –

我認爲你的問題只是一個小錯誤。

你的CSS選擇應該是：

.page_item a:hover{ 
    color: white; 
    transition: all 0.2s ease-in-out; 
}

相反的：

.page-item:hover a { 
    color: white; 
    transition: all 0.2s ease-in-out; 
}

希望我能幫上忙。

來源

2014-06-15 11:04:41 AndroidYODA94

謝謝！我確信我已經嘗試過那個，但是沒關係..我想我沒有成功！ – gempir

嘗試使用

li.page_item a:hover { 
    color: white; 
}

爲CSS選擇！

來源

2014-06-15 10:56:02

耶也可以，謝謝。李並不是100％需要。 – gempir

導航欄着色鏈接

回答

相關問題