如何在悬停时不改变链接的颜色

时间:2014-03-19 23:12:25

标签: html css asp.net-mvc microsoft-metro

我在MVC5应用程序中使用metro-ui-css并有一个菜单。现在我根本不想改变菜单链接的颜色。菜单导航栏如下所示:

 <nav class="navigation-bar-content">
            <a href="@Url.Action("Index", "Home")"><item class="element">A Thousand Counts</item></a>
            <item class="element-divider"></item>
            <item class="element">...</item>
        </nav>

添加以下css时:

.element > a, a:active, a:hover, a:link, a:visited {
    color: white;
}

我设法将链接的颜色保持为白色,就像我想要的那样。不幸的是,在悬停时它仍然变成蓝色。如何更改此行为并保持白色?我试过了:

a:hover {
    color: white;
}

但它不起作用。我很感激有CSS技能的人可以帮助我!

3 个答案:

答案 0 :(得分:1)

在CSS定义中,可能会有其他具有更高特异性的样式获得更高的优先级,从而覆盖您定义的样式。

根据您发布的HTML,这很可能会为您完成这项工作:

.navigation-bar-content a:hover {
    color: white;
}

答案 1 :(得分:1)

Arbel的小费很棒! 如果您遇到这些类型的问题并且无法找到罪魁祸首,有时候这些方法会有所帮助:

<nav class="navigation-bar-content">
    <a href="@Url.Action("Index", "Home")"><item class="element"><span class="workaround">A Thousand Counts</p></span></a>
            <item class="element-divider"></item>
            <item class="element">...</item>
        </nav>

.workaround > a, a:active, a:hover, a:link, a:visited {
    color: red;
}

答案 2 :(得分:0)

感谢Arbel的评论,问题解决了。添加!important:

.element > a, a:active, a:hover, a:link, a:visited {
    color: white!important;
}

菜单保持白色。太好了!