更改按鈕的文本而不更改CSS樣式

Question

我正在修改HTML和Javascript，但是遇到了問題。

我有一個按鈕，可以將鼠標懸停在動畫上，並在單擊時更改文本和顏色。 再次單擊時，它會返回與以前相同的顏色和文本。 我正在處理一個JS文件。

我的問題是，第一次單擊和懸停時一切正常，但是第一次單擊后，動畫將永遠消失，並且按鈕現在僅更改顏色和文本，沒有懸停動畫。

按鈕的HTML：

    <button class="button" style="vertical-align:middle" id="buttonclick" onclick="setColor()">
<span>Enable Control</span></button>

有關完整說明，請參見此JSfiddle 。

Answer 1

您的解釋有點模糊，標題有點混亂。 我想您想要與開始時一樣的懸停（當您按下按鈕並變回藍色時，則必須再次出現懸停）。 我會修好它：

問題是您要避免在代碼行上使用span標簽：

property.innerHTML = "Enable control"

您應該將其更改為：

property.innerHTML = "<span>Enable control</span>"

其他部分也是如此：

 property.innerHTML = "<span>Disable control</span>"

用此固定代碼替換您的Javascript代碼：

var count = 1;

function setColor() {
  var property = document.getElementById('buttonclick');
  if (count == 0) {
    property.style.backgroundColor = "#4f8ff7"
    property.innerHTML = "<span>Enable control</span>"
    alert("Disabled");
    count = 1;
  } else {
    property.style.backgroundColor = "#a84237"
    property.innerHTML = "<span>Disable control</span>"
    alert("Enabled");
    count = 0;
  }
}

Answer 2

您正在更改按鈕的innerHtml 。 那用文本替換了span元素。

檢查您更新的jsFiddle 。