html - :active only briefly works (during mouse click)

Question

出于某种原因，我将激活的文本 (a) 设为粗体，但它仅在用鼠标单击时才处于事件状态，当从单击中释放时，它会关闭并且文本变为回到正常状态。

这是为什么？

如果您访问了 MSN，请查看其搜索栏上方的文字。当你点击它时，它会变粗并变成橙色。无需离开页面。这就是我想要做的。

HTML:

<div id="searchtopics">
<ul>

    <li><a href="#">Web</a> </li>
    <li><a href="#">MSN</a> </li>
    <li><a href="#">Images</a> </li>
    <li><a href="#">Video</a> </li>
    <li><a href="#">News</a> </li>
    <li><a href="#">Maps</a> </li>
    <li><a href="#">Shopping</a> </li>

</ul>
</div>

CSS:

#searchtopics {
    position:absolute;
    margin-left:208px;
    margin-top:38px;
    }

#searchtopics a {
    text-decoration:none;
    float:left;
    padding: 2px 6px 4px 6px;
    color:rgb(100,100,100);
    }

#searchtopics a:hover{
    text-decoration:underline;

    }

#searchtopics a:active{
    color:rgb(100,100,100);
    font-weight:bold;

    }

#searchtopics ul   {
    display:inline;
    list-style:none;
}


#searchtopics ul li {
    display:inline;
    color:rgb(100,100,100);
    font-family:"arial", times, sans-serif;
    font-size:12px;
    }

Answer 1

那是因为该链接只有在您用鼠标单击它时才处于事件状态。如果您希望效果在鼠标悬停在其上的整个长度内持续，请使用 :hover。如果您希望它在页面被访问后持续存在，请使用 :visited。

编辑

如果您希望链接在加载新页面时保持事件状态，您需要为该链接提供一个应用该样式的类:

<li><a href="#" class="active">Images</a> </li>

#searchtopics a:active, a.active {