主页 / 问题 / 810999
Accepted
Tanya
Asked:2020-04-08 01:35:10 +0000 UTC2020-04-08 01:35:10 +0000 UTC

CSS。单击更改颜色并保存更改的值

  • 772
/* Элемент меняет цвет при наведении на него */
button.yt-icon-button:hover {
    vertical-align: middle;
    color: #ff0087;
}

/* Элемент меняет цвет во время нажатия на доли секунд.  */
button.yt-icon-button:active {
    vertical-align: middle;
    color: #01a715;


/* Элемент меняет цвет после нажатия, но стоит потом куда-то кликнуть и изменённый цвет заменяется на цвет по умолчанию. */
button.yt-icon-button:focus {
    vertical-align: middle;
    color: #01a715;
}

如何使元素的颜色在单击时更改，而不是在单击另一个位置时更改为默认值。

我试图从 Vadizar 添加代码。

结果是这样的：

在此处输入图像描述

但是当我添加底部时，我不需要背景更改。我不使用背景。

button { 
color: #ff9000 !important; 
transition: color 9999999s
} 

button:active { 
color: green;
transition: color 0s 
}

我的“竖起大拇指”没有变绿。为什么 ？

并进一步：

为什么 Vadizar 的代码高亮是这样的：

在此处输入图像描述

单词背景以绿色突出显示

而我的（可能是错误的）版本是这样的：

在此处输入图像描述

单词颜色未以绿色突出显示

为什么过渡后没有添加到末尾;？

javascript

2 个回答

  1. `JavaScript` 的变体

    在按钮单击时添加具有样式的类：

    var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  this.classList.add("active");
});
    button {
  color: white;
  background-color: black;
  border: none;
  outline: none;
  padding: 1.2rem 2rem;
  cursor: pointer;
  user-select: none;
}

.active {
  background-color: red;
}
    <button id="btn">Click</button>

    纯 `HTML/CSS` 变体

    绑定到:checkedy值<input type="radio">：

    input[type=radio] {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: -1;
}

label {
  cursor: pointer;
  user-select: none;
}

label {
  color: white;
  display: inline-block;
  background: black;
  margin: 0 0 .5em 0;
  padding: 1em 2em;
}

input[type=radio]:checked~label {
  background-color: red;
}
    <input type="radio" id="button">
<label for="button">Click</label>

    • 6
  2. Best Answer

    CSS没有黑客的纯解决方案input： 

     
button {
  color: #fff;
  background: #000;
  padding: 1.2rem 2rem;
  cursor: pointer;
  user-select: none;
  border: none;
  outline: none;
  transition: background 9999999s;
}

button:active {
  background: red;
  transition: background 0s;
}
    <button>Click</button>

    整个奥秘在于意义transition: 9999999s。颜色会在 2777 小时内逐渐恢复到原来的值。再次单击该按钮将重新启动计数器。

    我不坚持认为这是正确的方法，我完全同意St1myL的解决方案。然而，这个例子展示了它可以CSS用扭曲的想象力做什么，并且JS在input.

    • 5

相关问题