2

出于某种原因，我这样做了，所以我的活动文本 (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;
    }
4

4 回答 4

7

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

编辑

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

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

#searchtopics a:active, a.active {
于 2013-02-13T02:11:05.170 回答
1

如果要显示包含实际显示内容的链接，除了 little javascript 没有其他解决方案。编写一些函数来显示内容，这将禁用所有其他粗体，为当前链接启用粗体并显示内容。

于 2013-02-13T02:15:23.797 回答
0

链接有四种主要状态： a:hover a:active a:visited

a - 只是当它坐在那里并且从未被点击或正在被点击时。

a:hover - 这有点像 javascript 中的 mouseover 事件（如果你熟悉的话）。当指针“悬停”在链接上时，可以更改样式。

a:active - 这种样式只显示有东西点击链接的瞬间。由于这个原因，这个伪类可能是公众使用最少的。

a:visited - 此样式在用户单击链接后显示。

因此，如果您尝试更改引人注目的链接样式，我建议您使用不同的伪类而不是 a:active。

希望这可以帮助！

于 2013-02-13T02:34:01.240 回答
0

我知道这是个老话题，但它的简单解决方案是替换 a.active 而不是 a:active ，它对我有用，所以它也应该对你有用

于 2017-12-14T19:51:01.180 回答