Question

http://jusurubak.azurewebsites.net/www/EnrollmentMethod.aspx

我试图让按钮在选中时保持红色......当它们悬停时会变成红色。我在css中添加了一个活动类，但在选中时它不会保持红色。请参阅下面的CSS按钮：

.btn-red-lg {
display: block;
background-color: #666666;
color: white;
padding: 30px 30px;
margin: 20px auto;
border-radius: 12px;
text-align: center;
-o-transition: background-color .5s;
-moz-transition: background-color .5s;
-webkit-transition: background-color .5s;
transition: background-color .5s;
font-size: 14px;
}

.btn-red-lg:hover {
background-color: #cc0033;
}

.btn-red-lg:active {
background-color: #cc0033;
}

.active:active {
color: #cc0033;;
}
.focus:focus {
 color: #cc0033;
}
:target {
 color: #cc0033;
}

.btn-red-lg h3, .btn-red-lg p {
color: white;
line-height: 1.3em;
}

.btn-red-lg h3 {
text-transform: uppercase;
font-size: 25px;
font-weight: normal;
margin-bottom: 6px;
}

Answer 1

这是一个真正的HTML按钮，您正在应用这些类吗？只有当用户点击按钮并且没有放开点击时，才会激活:active pseduo-class。也许:focus是你正在寻找的东西，因为即使用户放开了鼠标，该按钮的背景也会变为红色，直到用户点击为止。

Answer 2

使用JavaScript，获得最佳和最简单的结果。示例：https://jsfiddle.net/stzvebcq/4/

HTML

<button class="button">button</button>
<div class="button">div</div>
<a href="#" class="button">link</a>

CSS

.clicked{
    background-color:red;
}

JS

$(".button").on("click",function(){
    $(this).addClass("clicked");
});

此示例使用jQuery库。

Answer 3

由于您没有提供清晰简洁的问题，因此无法确定您的问题究竟是什么。您应该编辑您的问题以提供一个简单的示例。

我怀疑你目前正在使用jQuery等来修改元素的类：

$(".btn-red-lg").click(function() {
  $(this).addClass("active");
});

所以，虽然您还没有给出确定所需的所有代码，但您似乎应该编辑“活跃的”代码。样式为不包含修饰符：

.active {
color: #cc0033;;
}

我怀疑，无论你做什么都关注＆＃39;焦点＆＃39;类也需要修改：

.focus {
 color: #cc0033;
}

Answer 4

所以要澄清一下，你是否试图让按钮在点击后保持红色？如果是这样，请尝试添加“已访问”类：

.btn-red-lg:visited {
background-color: #cc0033;
}

您可以在此处找到有关链接伪类的更多信息：http://www.w3schools.com/css/css_pseudo_classes.asp

CSS onclick活动类无效

4 个答案: