如何在点击时更改按钮CSS颜色

2024-05-02 • 问答

我有以下按钮，当它们悬停在它们上面时会改变。

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

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

function stripEmptyFonts(htmlString) {
   var tagTypes = [];

   return htmlString.replace(/<(\/)?\s*font\s*([^\s]*?)\s*>/g,function(match,closingSlash,attributes) {
      if(!closingSlash) {
         tagTypes.push(!!attributes);
         return attributes ? match : "";
      } else {
         return tagTypes.pop() ? match : "";
      }
   });
}

var html = `
<font>New</font>
<font color="red">Hello <font>world</font>!</font>
<font>Hello <font color="blue">back</font>!</font>
<font>ABCD<font>EFGH<font color="black">IJKL<font>MNOP<font color="red">QRST</font>UVWX</font>YZ</font>1234</font>5678</font>`

console.log(stripEmptyFonts(html));

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;
}

如果不使用JavaScript而不会出现意想不到的副作用，则无法实现这一目标。

如果visited状态无关紧要，甚至不需要，请查看@Blazemonger's答案。

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>

我认为如果不使用JavaScript添加类或更改样式，您不能使用按钮来完成此操作。

不过，您可以通过添加<a href>样式来使用:visited来做到这一点：

.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial,sans-serif;
  border:none;
  text-decoration:none;

}

.button:hover,.button:active,.button:visited{
  cursor: pointer;
  background: black;
}

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

<a href="#scale-0" id="scale-0" class="button btn-scale-0">0</a>
<a href="#scale-1" id="scale-1" class="button btn-scale-1">1</a>
<a href="#scale-2" id="scale-2" class="button btn-scale-2">2</a>
<a href="#scale-3" id="scale-3" class="button btn-scale-3">3</a>

缺点是，即使您离开页面并返回（除非用户清除了浏览器的历史记录），它们仍将保持黑色。

这是使用隐形复选框而不是按钮的第二种方法。但是，这也有一个缺点，用户可以再次单击该按钮以撤消颜色更改：

input[type=checkbox][id^=scale-] {
  display: none;
}
.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial,sans-serif;
  border: none;

}
input[type=checkbox][id^=scale-]:checked + .button,.button:hover,.button:visited {
  cursor: pointer;
  background: black;
}

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

<input type="checkbox" id="scale-0"><label for="scale-0" class="button btn-scale-0">0</label>
<input type="checkbox" id="scale-1"><label for="scale-1" class="button btn-scale-1">1</label>
<input type="checkbox" id="scale-2"><label for="scale-2" class="button btn-scale-2">2</label>
<input type="checkbox" id="scale-3"><label for="scale-3" class="button btn-scale-3">3</label>

如果您不想使用javascript并且您的按钮单击不会回发，那么我将对其进行更改，以使其改为使用单选按钮和标签（假设一次只能选择一个-如果可以选择多个，然后将收音机更改为复选框）：

substrings

False

如何在点击时更改按钮CSS颜色

yingchenlu 回答：如何在点击时更改按钮CSS颜色

大家都在问