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 {

Answer 2

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

Answer 3

链接有四种主要状态：一个答：悬停答：活跃一个：访问

a - 就在它坐在那里时它从未被点击过或处于被点击的过程中。

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

a：活跃 - 此样式仅显示点击链接时的瞬间。由于这个原因，这个伪类可能是公众最少使用的。

a：已访问 - 在用户点击链接后，此样式会显示出来。

因此，如果您尝试更改明显的链接样式，我建议使用不同的伪类而不是：active。

希望这有帮助！

Answer 4

我知道它的老话题，但简单的解决方法是替换a.active而不是：active，它为我做了诀窍所以它应该为你做以及

a：只有短暂有效（在鼠标点击期间）

4 个答案: