css - 事件导航栏链接

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伪类，它标记您过去访问过的链接(并且浏览器仍然可以记住它；))，或者您正在寻找自定义 .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 实现了这一点)。

现在假设您的访问者当前正在访问“关于”页面，并且您想在菜单中突出显示该页面。在这种情况下，您只需将一个类添加到特定的 <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 样式是级联的(名称中有什么...)，您可以覆盖您想要的每个属性。