Question

在我突出的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;
}

我有这个代码用于菜单分隔符＆＃34; |＆＃34;。 我想删除菜单分隔符的悬停效果，即，当我悬停鼠标时，只有菜单应该更改颜色而不是分隔符以及菜单。

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;    
}

Answer 1

只需确保在::after规则之后声明:hover规则并指定其color。

示例

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

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

Answer 2

我的问题解决了。我刚刚在menu-separator css代码中添加了 color 属性：

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!
}

颜色属性覆盖了所有悬停的更改颜色属性。非常感谢您的直接支持。

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

2 个答案: