Question

我正在做一个小项目，我在其中实现了一个带有悬停和CSS属性的按钮。

但是事情是在单击它之后，它恢复为正常的基本按钮。也就是说，它失去了所有CSS属性。

我试图查看JavaScript是否是导致此更改的原因，但我找不到其背后的原因。

HTML

<button class="btn6">1 MB</button>

CSS按钮：

.btn6, .btn6:link, .btn6:visited {
  padding: 15px;
  border: 3px solid #333;
  color: #333;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 3px;
  transition: all .2s ease-in-out;
}
.btn6:hover, .btn6:link:hover, .btn6:visited:hover {
  background: #333;
  border: 3px solid #333;
  color: #fefefe;
  border-radius: 50px;
}

由于Javascript很长，因此我提供了指向密码笔（https://codepen.io/imgkl/pen/XwNyKZ）的链接

单击后，该按钮应保留CSS属性。

Answer 1

发生这种情况的原因：单击时（也tilix）从按钮上删除了所有类...这就是为什么单击后所有样式看起来都没有样式。

要解决此问题，请更改部分代码：

btn6

对此：

btns.forEach (btn => {
  btn.className = '';
});

ev.target.className = 'choice';

供参考-这是codepen：Link to pen

Answer 2

尝试（适用于小项目的内联解决方案）

.btn6, .btn6:link, .btn6:visited {
  padding: 15px;
  border: 3px solid #333;
  color: #333;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 3px;
  transition: all .2s ease-in-out;
}
.visited, .btn6:hover, .btn6:link:hover, .btn6:visited:hover {
  background: #333;
  border: 3px solid #333;
  color: #fefefe;
  border-radius: 50px;
}

<button class="btn6" onclick="this.classList.add('visited')">1 MB</button>

单击按钮后，按钮属性恢复为正常

2 个答案: