如何删除菜单分隔符的悬停效果？

在我的显着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

如何删除菜单分隔符的悬停效果？

回答

相关问题