2016-03-01 41 views
-1

我有导航右侧我显示登录用户名在下面的列表项,当第一次页面加载它设置为background-color #857363和文本设置为#fff,现在当我悬停在我看不到文本,因为访问的链接是设置为白色。如何在悬停时更改锚文本颜色?

如何在锚标签下方定位目标,并在悬停,访问和活动时使文本颜色变为黑色?

main.html中

<li style="margin-right: 0;" class="nav navbar-nav navbar-right kendoMenuBorder" 
    ng-show="user.isAuthenticated"><a> 
    {{user.customUserDetails.workFullName}} </a> 
    <ul class="submenu"> 
     <li><a ui-sref="app.logout"> Logout </a></li> 
    </ul> 
</li> 

的main.css

.kendoMenuBorder { 
    color:#fff !important; 
    background-color:#857363 !important; 
    text-decoration: none; 
} 

    li.kendoMenuBorder a { 
     color:#fff !important; 
    } 
    li.kendoMenuBorder a:visited a:hover { 
     color:#000000 !important; 
    } 

回答

2

没有您的选择问题。其实你必须在这方面使用multiple selector

li.kendoMenuBorder a:visited,li.kendoMenuBorder a:hover { 
    color:#000000 !important; 
} 

你选择li.kendoMenuBorder a:visited a:hover是错误的,因为它会设置改变颜色时anchor:visited anchor徘徊。

+0

这里是小问题,现在当我悬停在锚标签为用户细节其显示黑色颜色多数民众赞成好但注销是锚标签的下拉菜单项是白色,我看不到文本。 – aftab

+0

@aftab你能做这样的工作演示吗? https://jsfiddle.net/krdd6bvn/,以便我们更容易为您回答 –

+0

对不起,无法访问任何这些网站 – aftab

0

您的问题与使用!important属性无处不在。我想,这可以通过指定一个ID改变CSS中的优先级来解决,以

li.kendoMenuBorder a { 
     color:#fff !important; 
    } 

部分,而不是保持它作为一类的。

!important覆盖一切,你应该避免使用它。

+0

嗨,恩斯,欢迎来到StackOverflow!虽然我们确实欢迎提出建议,但应该保留答案以供您确切解决手头问题的具体解决方案。在这种情况下,如果您给出了一个可行的示例,您的答案可能会更有价值 – shrmn

+0

您好。好的,我将来会记住这一点。我实际上正在计划将它作为评论添加到上面的答案中,但唉,没有足够的评论声望。 – Eorekan