单击后更改按钮的背景颜色

Question

这是与我的按钮相关的 html 代码。 如您所见，我尝试在 CSS 和 JS 中添加一个 id 来引用它。

<div class="col-lg-8 main">
  <h1>Constructive Design</h1>
  <p>
    Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p>
  <button type="button" class="btn btn-primary" id="conbutton">Continue...</button>
</div>

这是没有 hover 的主按钮的 CSS

.main button{
  background: transparent;
  border: 1.3px solid white;
  margin-top: 50px;
  width: 180px;
  height: 70px;
  color:white;;
}

这是带有 hover 的主按钮的 CSS

.main button:hover{
  background: transparent;
  color: #33ccff;
  border-color: #33ccff;
  transition:all 1.3s;
}

这是 class.clbutton 的 CSS，我将在 JS 中引用。

.conbuttoncl{
  background: transparent;
}

这是我在 HTML 中引用的那个 ID 的 JS，并向它添加一个 class.clbutton。 让我知道我是否在这里走错了路，以及是否有其他方法可以解决同样的问题，即在我的鼠标点击后将按钮的背景更改为透明。 我不希望用户单击按钮后按钮的颜色变为蓝色。

var conbutton = document.querySelector("#conbutton");
conbutton.addEventListener("click", function(){
  conbutton.classList.add(".conbuttoncl");
});

Answer 1

我更改了所有不同状态的按钮颜色以显示此功能，因为在您的问题中您将它们全部设置为transparent 。

问题一：

conbutton.classList.add(".conbuttoncl");

应该

conbutton.classList.add("conbuttoncl"); //Without . in class name

问题 2：您过度指定了.main按钮 class，这意味着它不会被松散的.clbutton class 覆盖。 相反，只需使其更精确，因此：

.conbuttoncl {

应该

.main button.conbuttoncl {

工作示例：

 var conbutton = document.querySelector("#conbutton"); conbutton.addEventListener("click", function() { conbutton.classList.add("conbuttoncl"); });

 .main button { background: red; border: 1.3px solid white; margin-top: 50px; width: 180px; height: 70px; color: white; ; }.main button:hover { background: green; color: #33ccff; border-color: #33ccff; transition: all 1.3s; }.main button.conbuttoncl { background: blue; }

 <div class="col-lg-8 main"> <h1>Constructive Design</h1> <p> Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p> <button type="button" class="btn btn-primary" id="conbutton">Continue...</button> </div>

Answer 2

你可以简单地使用 JavaScript

 function bgchange() { document.getElementById("conbutton").style.background = "red"; }

 .main button { background: orange; border: 1.3px solid white; margin-top: 50px; width: 180px; height: 70px; color: white; }.main button:hover { background: transparent; color: #33ccff; border-color: #33ccff; transition: all 1.3s; }

 <div class="col-lg-8 main"> <h1>Constructive Design</h1> <p> Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p> <button type="button" class="btn btn-primary" id="conbutton" onclick="bgchange()">Continue...</button> </div>