javascript - 在不改变 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>"

else部分也是如此:

 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;
  }
}