CSS不會對按鈕動作產生影響

Question

我想通過javascript來控制按鈕的CSS（外觀）。我希望按鈕懸停在樣式上，並且也是點擊狀態，其中按鈕基本禁用。我創建了一個測試頁面，可以通過另一個按鈕在按鈕的啓用狀態和禁用狀態之間切換。問題是 - 我沒有看到我的變化生效，即色變適當等 下面是代碼：

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

 
function toggleButtonClick(){ 
 
\t 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*/ 
 
\t border-radius: 3px; 
 
\t border:1px solid white; 
 
\t text-transform: uppercase; 
 
\t margin-left: 15px; 
 
    background-color: yellow; 
 
} 
 
.myButton.hover { 
 
    border: 5px solid purple; 
 
    background-color: pink; 
 
} 
 

 
.myButton.disabled { 
 
\t 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

Answer 2

更改懸停樣式的正確方法是item：而不是item。 （這代表類）

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

 
function toggleButtonClick(){ 
 
\t 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*/ 
 
\t border-radius: 3px; 
 
\t border:1px solid white; 
 
\t text-transform: uppercase; 
 
\t margin-left: 15px; 
 
    background-color: yellow; 
 
} 
 
.myButton:hover { 
 
    border: 5px solid purple; 
 
    background-color: pink; 
 
} 
 

 
.myButton:disabled { 
 
\t 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 3

改變你的風格是這樣的...

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

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

Answer 4

你把一個錯誤的代碼，你的CSS這就是爲什麼不影響設計，您正在使用.myButton.disabled正確使用的是.myButton:disabled

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

 
function toggleButtonClick(){ 
 
\t 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*/ 
 
\t border-radius: 3px; 
 
\t border:1px solid white; 
 
\t text-transform: uppercase; 
 
\t margin-left: 15px; 
 
    background-color: yellow; 
 
} 
 
.myButton:hover { 
 
    border: 5px solid purple; 
 
    background-color: pink; 
 
} 
 

 
.myButton:disabled { 
 
\t 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>