单击后更改按钮颜色

Question

我想在点击后将“After”的背景颜色更改为蓝色，但不管怎样就是不显示。我不确定 SCSS 中有什么问题。非常感谢任何建议！

这是 JS Fiddle：https://jsfiddle.net/u1h9fe6v/

.grid-list {
  --color: #f6f8ff;
  --background: #2b3044;
  --background-hover: green;
  --background-active: blue;
  padding: 6px 12px 6px 8px;
  margin: 0;
  display: flex;
  outline: none;
  position: relative;
  border: none;
  border-radius: 9px;
  background: var(--b, var(--background));
  cursor: pointer;
  -webkit-appearence: none;
  -webkit-tap-highlight-color: transparent;
  transform: scale(var(--scale, 1)) translateZ(0);
}
.grid-list:active {
  --scale: 0.95;
  --background-active: blue;
}
.grid-list:hover {
  --b: var(--background-hover);
}

Answer 1

看来你可以在 ".grid-list.animation.active {" 样式。像这样...

.grid-list.animation.active {
  --span-name: text-active;
  --dots-name: move;
  --lines-name: scale;
  --lines-duration: 0.15s;
  --lines-delay: 0.3s;
  background: blue;
}

单击后更改按钮颜色

Changing the button color after it is clicked

sass