链接按钮随CSS变化?

时间:2010-08-20 08:50:12

标签: css

简单来说,我想在堆栈溢出顶部导航器上实现一些东西,其中活动按钮的颜色是不同的但是只使用CSS而不是JavaScript?

但是a:active似乎没有按预期工作。 我看到了一些非常常见的示例,其中通过将类分配给服务器或客户端标记中的活动元素来完成此操作。这可能只使用CSS吗?

<HTML>
    <HEAD>
        <TITLE>Its Nav</TITLE>
        <STYLE type="text/css">
            div {
                width:200;
            }
            ul {
                list-style:none;
            }
            ul li a {
                padding:2 4 2 4;
                border:1px solid blue;
                display:block;
                text-decoration:none;
            }
            ul li a:active {
                color:green;
            }
            ul li a:hover {
                color:red;
            }           
            ul li a:link {
                color:gray;
            }
        </STYLE>
    </HEAD>
    <BODY>
    <div>
        <ul>
            <li><a href="#" >link one</a></li>
            <li><a href="#" >link two</a></li>
            <li><a href="#" >link three</a></li>
            <li><a href="#" >link four</a></li>
            <li><a href="#" >link five</a></li>
            <li><a href="#" >link six</a></li>
            <li><a href="#" >link seven</a></li>
            <li><a href="#" >link eight</a></li>
            <li><a href="#" >link nine</a></li>
            <li><a href="#" >link ten</a></li>
        </ul>
    <div>
    </BODY>
</HTML>

1 个答案:

答案 0 :(得分:0)

如果我理解你想要做什么,使用:active将无法帮助你。 css伪类活动显示单击链接时(确切地说是单击链接时和下一页加载之前)。之后,它将变为已访问。

编辑: 我没有看到你想要一个专门的CSS解决方案。 我相信你需要的是之前已经回答的问题。检查How to set a active link as default when page first time load是否有帮助:)

由于您不需要JavaScript解决方案,我建议您在导航栏中为活动<li>标记创建一个新类。您可以动态地(例如使用php)或手动为html中的每个页面执行此操作。

正如其他人已经评论过的那样,如果您发布了代码,那么给您一个可以直接申请的答案会更容易。