CSS 未对按钮操作生效

Question

我想通过 javascript 控制按钮的 css(外观)。我希望按钮有一个悬停样式，还有一个点击状态，按钮基本上被禁用。我创建了一个测试页面，我可以在其中通过另一个按钮在按钮的启用和禁用状态之间切换。问题是 - 我没有看到我的更改生效，即颜色适当更改等。这是代码:

function myButtonOnClick(){
	alert("You are clickin on me!!");
  document.getElementById("myButton").disabled = true;
}

function toggleButtonClick(){
	document.getElementById("myButton").disabled = !document.getElementById("myButton").disabled;
}

.myButton {
text-align: center;
padding: 2px;
opacity: 0.86;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 86);
/*-ms-filter must come before filter*/
	border-radius: 3px;
	border:1px solid white;
	text-transform: uppercase;
	margin-left: 15px;
  background-color: yellow;
}
.myButton.hover {
  border: 5px solid purple;
  background-color: pink;
}

.myButton.disabled {
	background-color: blue;
  border: 5px solid red;
}

<input type="button" name="myButton" id="myButton" class="myButton" 
  onclick="myButtonOnClick()"
  value="Click Me!"></input>
  
  <input type="button" name="toggleButton" id="toggleButton" class="toggleButton"
    onclick="toggleButtonClick()"
    value="Toggle the other button"></input>

Answer 1

你把残疾人写错了。它不是一个类，它是一个属性。悬停也不是一个类。

改变

.myButton.hover {
  border: 5px solid purple;
  background-color: pink;
}
.myButton.disabled {
    background-color: blue;
  border: 5px solid red;
}

到

.myButton:hover {
  border: 5px solid purple;
  background-color: pink;
}
.myButton[disabled] {
    background-color: blue;
  border: 5px solid red;
}

它应该可以工作。

我建议您阅读更多有关选择器在 CSS 中的工作原理的信息。 https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors