css - Bootstrap 在标题中创建事件按钮链接

Question

大家好，我在为一门类(class)设计网站时正在学习 bootstrap/CSS。

Heroku app

现在我的标题很好。有一些按钮，它们有一个标签覆盖所有按钮，并且都在一些 div 和容器中。

我想要这样当我点击主页或任何激活的按钮时，我可以改变它的颜色，例如当我在网站的那个部分时，我可以改变它的颜色。我试过 &:active 但它不是那样工作的。

对不起，如果在我搜索了很多但不知道如何找到它之前有人问过它。还检查了 Bootstrap 文档。

这是我的代码

CSS

header{
text-align: center;
padding-bottom: 0em;
}

.navbar-inverse{
background: gray;
}



.btn {
border-style: dotted;
border-color: gray;
line-height: 5em;
width: 8em;


a{
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    display:block;
    width: 100%;
    height: 100%;




    &:active{
        background-color: gray;
    }


    &:hover{
        text-decoration: none;
        background-color: navy;
    }

    }
}

.btn-lg{
background: black;
height: 90px;
padding: 0px 0px 0px 0px;
}


HTML HEADER

<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">

<button type="button "class="btn btn-lg"><%= link_to current_user.name, current_user %></button>

<button type="button" class="btn btn-lg"><%= link_to "Log Out", root_path %></button>

<button type="button" class="btn btn-lg"><%= link_to "New Event", new_event_path %></button>

<button type="button" class="btn btn-lg"><%= link_to "All Events", events_path %></button>


</div>
</header>

Answer 1

这样做，给你的按钮 class 名称，假设是 man，然后在你的 css .man:active 中给它你想要的颜色。

.man:active{
background-color: #2222;
}

现在，如果您希望在单击按钮后颜色保持不变，访问过哪个按钮，

.man:visited{
background-color: #ffff;
}