Question

我有导航右侧我在下面的列表项中显示登录的用户名，当第一次页面加载设置为background-color #857363并且文本设置为#fff时，现在我将鼠标悬停在i上无法看到文本，因为访问过的链接设置为白色。

我如何定位锚标记下方，并在悬停，访问和激活时使文字颜色变黑？

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

Answer 1

您的选择器出现问题。实际上你必须在这种情况下使用multiple selector。

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

您的选择器li.kendoMenuBorder a:visited a:hover错误，因为当anchor内:visited anchor悬停时，它会设置为更改颜色。

Answer 2

您的问题与在任何地方使用!important属性有关。我认为这可以通过将ID分配给

来改变CSS中的优先级来解决

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

部分而不是将其保持为类。

!important会覆盖所有内容，您应该避免使用它。

如何在悬停时更改锚文本颜色？

2 个答案: