單擊后更改按鈕的背景顏色

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>