Question

我的网站中有正常的链接状态和悬停状态，但由于某种原因，活动状态不起作用，为什么这不起作用。有人可以帮忙吗我希望活动状态能够保持链接不会变回原来的颜色。

         ul#menu li a {
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #223e99 ;
        border-left:solid;
        border-left-color: #223e99 ;
        border-right:solid;
        border-right-color: #223e99 ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#223e99 ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#223e99 ;
        border-bottom-width:15px;
        margin-left:-18px;


    }

    ul#menu li a:hover {
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #7fc14b ;
        border-left:solid;
        border-left-color: #7fc14b ;
        border-right:solid;
        border-right-color: #7fc14b ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#7fc14b ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#7fc14b ;
        border-bottom-width:15px;
        margin-left:-18px;
    }


    ul#menu li a:active{
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #7fc14b ;
        border-left:solid;
        border-left-color: #7fc14b ;
        border-right:solid;
        border-right-color: #7fc14b ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#7fc14b ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#7fc14b ;
        border-bottom-width:15px;
        margin-left:-18px;
    }

Answer 1

active状态可能与您想象的有点不同。单击链接/按钮或元素时，它将处于活动状态。当你松开鼠标按钮时，它会失去它的活动状态。

我相信您正在寻找的是:visited伪类，它标记了您过去访问过的链接（浏览器仍然可以记住它）;或者您是＆＃39 ;寻找自定义.active类（只创建自己的css类名称），指定/突出显示用户当前访问的页面。

编辑要演示的一些代码。

我们假设您有一个菜单，其顶部导航链接指向您的主页，新闻栏目，关于和联系页面：

<ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

最初它们看起来都一样。如果你将鼠标悬停在它们上面，它们看起来会有所不同（你已经用自己的css实现了这一点）。

现在让我们假设您的访问者当前正在访问about页面，并且您想在菜单中突出显示该页面。在这种情况下，您只需向特定的<li>添加一个类，并在样式表中添加一些样式：

<ul id="menu">
    ...
    <li class="active"><a href="/about"></a></li> <!-- Note the 'class="active"' in the <li> element
    ...
</ul>

ul#menu li.active a { color: red; }

在上面的示例中，About链接将采用红色字体颜色。根据您的需要应用样式。并且不要退缩！由于您的CSS样式是级联的（名称中的内容......），您可以覆盖您喜欢的每个属性。

Answer 2

您需要了解:active和:visited之间的区别。

单击链接时会显示

:active，只有在您点击时，:visited会显示在您已经看过的链接上。

完全不同的是，你应该清理CSS。你有很多重复。在font-family中声明font-size和ul#menu li a之类的内容后，您无需在ul#menu li a:hover，ul#menu li a:active和{{1}中重复这些内容除非他们改变。

我冒昧地更新你的CSS给你看：

ul#menu li a:visited

如果你想让它更容易阅读，你可以使用简短的声明，如下所示：

ul#menu li a {
    text-decoration: none;
    font-family: 'Novecento Sans W01 Lt';
    font-size: 14px;
    color: white;
    background-color: #223e99 ;
    border-left: solid;
    border-left-color: #223e99 ;
    border-right: solid;
    border-right-color: #223e99 ;
    border-left-width: 32px;
    border-right-width: 32px;
    border-top: solid;
    border-top-color: #223e99 ;
    border-top-width: 15px;
    border-bottom: solid;
    border-bottom-color: #223e99 ;
    border-bottom-width: 15px;
    margin-left: -18px;
}

ul#menu li a:hover, 
ul#menu li a:active, 
ul#menu li a:visited, {
    background-color: #7fc14b ;
    border-left-color: #7fc14b ;
    border-right-color: #7fc14b ;
    border-top-color: #7fc14b ;
    border-bottom-color: #7fc14b ;
}

您可以在CSS Schools

了解有关边界短手的更多信息

Answer 3

试试这些

按照以下层次结构给出css：

.main_class .2class ul#menu li a { /* your css here */ }

或

#main_class #2_class ul#menu li a { /* your css here */ }

示例：

.container .site_content ul#menu li a {
    /* your css */
}

.container .site_content ul#menu li a:hover {
    /* your css */
}

.container .site_content ul#menu li a:active {
    /* your css */
}

活动导航栏链接

3 个答案: