时间戳

首页 > 解决方案 > 如何在单击时更改按钮 CSS 颜色

html - 如何在单击时更改按钮 CSS 颜色

问题描述

我有以下按钮在悬停在它们上时会发生变化。

当我单击屏幕上的其他位置时，如何在选择其中一个按钮时设置背景颜色而不会丢失选择？

在当前方式中，单击按钮使其成为您选择的颜色，但单击屏幕的另一个字段将返回原始颜色。

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
}

button:hover {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}
<button id="scale-0" class="btn-scale-0">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3">&nbsp;3&nbsp;</button>

标签： htmlcssstylesfrontendangular-ui-bootstrap

解决方案

如果不使用 JavaScript 而不会遇到意想不到的副作用，就不可能实现这一点。

如果visited状态无关紧要或什至是需要的，请查看@Blazemonger 的回答。

CSS 伪类focus，active通过单击页面上的其他位置时丢失其状态来定义。

JavaScript(+JQuery) 解决方案：

$("#scale-0").click(function() {
  $("#scale-0").addClass('button-clicked');
});
$("#scale-1").click(function() {
  $("#scale-1").addClass('button-clicked');
});
$("#scale-2").click(function() {
  $("#scale-2").addClass('button-clicked');
});
$("#scale-3").click(function() {
  $("#scale-3").addClass('button-clicked');
});
button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
}

button:hover{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

.button-clicked {
  background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="scale-0" class="btn-scale-0 btn">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1 btn">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2 btn">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3 btn">&nbsp;3&nbsp;</button>

推荐阅读