切換功能后激活懸停顏色-有解無憂

我在這里閱讀了很多帖子，但我找不到解決方案.. 任何想法為什么懸停顏色在第二次點擊時不起作用？（請使用代碼段或 jsfiddle 的示例）謝謝！！！

function toggleButton() {
  var button = document.getElementById('toggle').style.backgroundColor;
  var color = '';

if (button !== 'pink') {
  color = 'pink';
document.getElementById('toggle').style.backgroundColor = color;
document.getElementById('toggle').style.color = "#222";

} else if (button === 'pink') {
  color = '#2c475c';
document.getElementById('toggle').style.backgroundColor = color;
document.getElementById('toggle').style.color = "#fff";
  }
}

#toggle {    
  padding: 20px 45px;
  background: green;
  color: #fff;
  border-radius:5px;
  font-weight:600; 
}

#toggle:hover {  
  background: aqua;
}

<button  id="toggle" onclick="toggleButton();">TOGGLE</button >

uj5u.com熱心網友回復：

來自評論

當您通過 javascript 設定樣式時，它會包含在樣式屬性中，該屬性會覆寫您從樣式表設定的任何其他樣式。而是設定新樣式，添加類 classList.add('myNewClass') ，因此它可以是樣式表的一部分，規則不是最重要的規則

例子

document.getElementById("toggle").addEventListener("click", myFunction);

function myFunction() {
  if (this.classList.contains('pink')) {
      this.classList.toggle('darkblue');
    }
    this.classList.toggle('pink');
  };

#toggle {
  padding: 20px 45px;
  background: green;
  color: #fff;
  border-radius: 5px;
  font-weight: 600;
}

#toggle:hover,
#toggle.pink:hover,
#toggle.darkblue:hover{
  background: aqua;
}

#toggle.pink {
  background-color: pink;
  color: #222;
}

#toggle.darkblue {
  background: #2c475c;
  color: white;
}

<button id="toggle">TOGGLE</button >

uj5u.com熱心網友回復：

我只是編輯color='#2c475c'要color=''和一切作業正常！

function toggleButton() {
  var button = document.getElementById('toggle').style.backgroundColor;
  var color = '';

if (button !== 'pink') {
  color = 'pink';
document.getElementById('toggle').style.backgroundColor = color;
document.getElementById('toggle').style.color = "#222";

} else if (button === 'pink') {
  color = '';
document.getElementById('toggle').style.backgroundColor = color;
document.getElementById('toggle').style.color = "#fff";
  }
}

#toggle {    
  padding: 20px 45px;
  background: green;
  color: #fff;
  border-radius:5px;
  font-weight:600; 
}

#toggle:hover {  
  background: aqua;
}

<button  id="toggle" onclick="toggleButton();">TOGGLE</button >

uj5u.com熱心網友回復：

因為您使用行內樣式設定背景，這比您的 CSS 具有更大的特異性。如果要覆寫任何行內樣式，則必須在 CSS 中創建樣式!important。

#toggle:hover {  
  background: aqua !important;
}

編輯

正如@G-Cyrillus所提到的，更好的方法是使用按鈕所需的顏色創建類并切換這些類（而不是行內樣式）。對于您的代碼，最好創建 2 個類： forpink和grey。

.pink {
  color: #222;
  background-color: pink;
}
.grey {
  color: #fff;
  background-color: #2c475c;
}

現在您只需要編輯您的 JS 檔案，這樣它就可以與您的新類一起使用。

function toggleButton() {
  var button = document.getElementById("toggle");

  if (button.classList.contains("grey")) {
    button.classList.remove("grey");
    button.classList.add("pink");
  } else {
    button.classList.remove("pink");
    button.classList.add("grey");
  }
}

并且因為比普通或類:hover 具有更大的特異性，它會觸發您的懸停樣式。pinkgrey

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355506.html

標籤：javascript html css

上一篇：將交叉png居中到css網格中

下一篇：網格列沒有使用完整的行空間，溢位到下一行