如何刪除菜單分隔符的懸停效果？

在我的顯着WordPress主題中，這是我的菜單的CSS。如何刪除菜單分隔符的懸停效果？

header#top nav > ul > li > a { 
    font-family: Arial,sans-serif; 
    text-transform: capitalize; 
    letter-spacing: .5px; 
    font-size: 17px; 
    line-height: 23.8px; 
}

我有菜單分隔符「|」的代碼。 我想刪除菜單分隔符的懸停效果，即當我懸停鼠標時，只有菜單應該改變顏色，而不是分隔符和菜單。

media="all" 
header#top nav > ul > li > a::after { 
    content: "|"; 
    padding-right: .8em; 
    padding-left: .8em; 
}

編輯：添加：懸停碼

a:hover { 
color: inherit; 
} 

header#top nav ul li a:hover, 
header#top nav .sf-menu li.sfHover > a, 
header#top nav .sf-menu li.current_page_ancestor > a, 
header#top nav .sf-menu li.current-menu-item > a, 
header#top nav .sf-menu li.current-menu-ancestor > a, 
header#top nav .sf-menu li.current_page_item > a { 
color: #27CFC3; 
} 

.sf-menu li ul li a:hover, .sf-menu li ul li.sfHover > a { 
color: #27CFC3; 
background-color: #272727!important;  
}

來源

2015-05-11 Chandz

你能製作一個JSFiddle鏈接來解決這個問題嗎？ – Nitesh

你能告訴我們你選擇懸停風格的選擇嗎？ – Sam

css懸停選擇器實際上是'：hover {'，除非你在css中有這個，懸停效果是用JavaScript來執行的。 – Banana

只需確保:hover規則後::after規則聲明，並指定其color。

例

a{ 
 
    color:black; 
 
    text-decoration:none; 
 
} 
 
a:hover{ 
 
    color:red; 
 
} 
 
a::after{ 
 
    color:black; 
 
    content:"|"; 
 
    padding:0 5px; 
 
}

<a href="#">link</a>

來源

2015-05-11 10:20:59 Shaggy

是兄弟我的代碼是在頁面的末尾。我認爲問題是它的繼承屬性： header＃top nav> ul> li> a :: after – Chandz

我的問題解決了。我只是說顏色財產在我的菜單分離器的CSS代碼：

media="all" 
header#top nav > ul > li > a::after 
{ 
content: "|"; 
padding-right: .8em; 
padding-left: .8em; 
color: #008daa!important; //I inserted this line. It works perfect now! 
}

Color屬性壓倒所有的懸停變色特性。非常感謝您的直接支持。

來源

2015-05-11 11:56:47 Chandz

如何刪除菜單分隔符的懸停效果？

回答

相關問題