Question

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

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

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

更改

@Component({
...
properties: [
'whatEver:whatEver',
'whatEver2:whatEver2'
]
})

到

.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

Answer 2

更改悬停样式的正确方法是item：而不是item。（代表班级）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

像这样改变你的风格......

＆＃13;

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

＆＃13;

Answer 4

你输入了错误的css代码，这就是为什么不影响设计，你正在使用"the silhouette of a fig tree atop a nearby hill"正确使用它.myButton.disabled

＆＃13;

.myButton:disabled

＆＃13;

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

＆＃13;

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

＆＃13;

CSS不会对按钮操作生效

4 个答案: