我見過不同的類似答案，但沒有一個與我正在處理的嵌套級別有關。我有兩組按鈕，圓形按鈕和矩形按鈕，我希望背景在懸停時變為白色。我唯一能夠成功更改的是矩形的文本顏色。
我以前有行內按鈕樣式，并認為這是問題所在。可能不會 ：/
ID 是否覆寫 :hover 更改？如果是這樣，我是否需要重新格式化所有按鈕？謝謝！
（以前的代碼解決方案涉及 jquery，我對此一無所知）
/*
CS 81 Final - Noah Derby
*/
//Global Variables
"use strict";
let gameActive = false;
let dealerValue = 0;
let playerValue = 0;
let buttons = document.getElementsByTagName('button');
let totalAmount = document.getElementById('betAmount');
let bank = document.getElementById('bank');
//Card Functions and
function Card(value, name, suit) {
this.value = value;
this.name = name
this.suit = suit
}
function newDeck() {
let suits = ['Hearts','Diamonds','Spades','Clubs'];
let names = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
let deck = []
for(let i of suits) {
for(let n=0; n < names.length; n ) {
deck.push(new Card(n 1, names[n], i));
}
}
for (let i = deck.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i 1));
const temp = deck[i];
deck[i] = deck[j];
deck[j] = temp;
}
return deck;
}
function addTo(player, card){
let ascii_char;
let div = document.createElement('card');
div.className = 'card';
if(card.suit === 'Diamonds'){
ascii_char = "♦";
div.style.color = 'red';
} else if (card.suit === 'Hearts') {
ascii_char = '♥'
div.style.color = 'red';
} else {
ascii_char = "&" card.suit.toLowerCase() ";"
}
div.innerHTML = "<span class='number'>" card.name "</span><span class='suit'>" ascii_char "</span>";
if(player.id === "dealerTotal"){
document.querySelector(".dealerCards").appendChild(div);
} else {
document.querySelector(".playerCards").appendChild(div);
}
if (card.value > 10){
player.value = parseInt(player.value, 10) 10;
} else if (card.value === 1) {
let handValue = parseInt(player.value, 10);
if(handValue <= 10) {
player.value = handValue 11
} else {
player.value = handValue 1
}
} else {
player.value = parseInt(player.value, 10) card.value;
}
}
function clearCards() {
document.querySelector(".dealerCards").innerHTML = "";
document.querySelector(".playerCards").innerHTML = "";
}
//Button Handlers
for (let i=0; i < buttons.length; i ) {
buttons[i].addEventListener('click', () => {
let playerTotal = document.getElementById("playerTotal");
let dealerTotal = document.getElementById("dealerTotal");
let bankValue = parseInt(bank.value, 10);
let amountValue = parseInt(totalAmount.value, 10);
let cards = newDeck();
switch (buttons[i].id) {
case "one":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 1;
break;
}
break;
case "five":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 5;
break;
}
break;
case "ten":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 10;
break;
}
break;
case "twentyfive":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 25;
break;
}
break;
case "hundred":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 100;
break;
}
break
case "fivehundred":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 500;
break;
}
break;
case "thousand":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 1000;
break;
}
break;
case "reset":
if (!gameActive){
totalAmount.value = 0;
break;
}
break;
case "submit":
if(!gameActive){
if (bankValue === 0) {
alert("No funds available :(");
break;
} else if (amountValue === 0) {
alert("Please Enter a valid amount")
break;
} else if(amountValue > bankValue){
totalAmount.value = bank.value;
bank.value = 0;
} else{
bank.value = bankValue - amountValue;
}
clearCards();
playerTotal.value = dealerTotal.value = '0';
addTo(playerTotal, cards.pop());
addTo(playerTotal, cards.pop());
addTo(dealerTotal, cards.pop());
dealerTotal.style.color = "transparent";
gameActive = true;
break;
}
break;
case "hit":
if(gameActive) {
addTo(playerTotal, cards.pop())
if(parseInt(playerTotal.value, 10) > 21){
alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
dealerTotal.style.color = "black";
totalAmount.value= '0';
gameActive = false;
break;
}
}
break;
case 'stand':
if (gameActive) {
playerValue = parseInt(playerTotal.value, 10);
while(parseInt(dealerTotal.value, 10) <= 17){
addTo(dealerTotal, cards.pop());
}
dealerValue = parseInt(dealerTotal.value, 10);
if (dealerValue > 21){
alert(`You won $${amountValue*2}!!!`);
bank.value = bankValue amountValue * 2;
totalAmount.value = 0;
gameActive = false;
dealerTotal.style.color = "black";
break;
}
if (playerValue < dealerValue) {
alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
totalAmount.value= '0';
} else if (playerValue > dealerValue) {
alert(`You won $${amountValue*2}!!!`);
bank.value = bankValue amountValue * 2;
totalAmount.value = '0';
} else {
alert(`Its a tie! Funds refunded!`);
bank.value = bankValue amountValue;
totalAmount.value= '0';
}
dealerTotal.style.color = "black";
gameActive = false;
}
break;
}
}, false)
}/* CS 81 Final - Noah Derby */
body {
background-image: url('https://cdn.hipwallpaper.com/i/46/65/hEiUkp.jpg');
background-size: cover;
font-family: Verdana, sans-serif, bold;
font-weight: bold;
margin: 5px;
}
header {
text-align: center;
font-size: 50px;
margin: 50px 500px -50px;
}
label{
font-size: 25px;
}
input{
font-size: 25px;
color: black;
background-color: white;
}
div {
margin: 5px;
}
.economyWrap{
position: relative;
float: left;
width: 480px;
height: 500px;
top: 100px;
left: 50px;
}
.playWrap{
position: relative;
border: 5px solid black;
float: left;
top: 100px;
width: 260px;
height: 300px;
margin-left: 140px;
}
.textContainer{
padding: 5px;
background: rgba(0, 128, 0, 0.02);
margin: 200px 0 0 125px;
width: 400px;
float: left;
}
.playButtonContainer{
position: absolute;
margin: 17px;
bottom:-90px;
}
.earningsContainer{
position: absolute;
width: 450px;
height: 35px;
padding: 5px;
top:0;
left:85px;
}
.submitContainer {
margin: auto;
position: absolute;
width: 340px;
bottom: 220px;
left: 120px;
}
.chipContainer{
margin: auto;
position: absolute;
height: 210px;
width: 250px;
left: 140px;
bottom: 0;
}
/*
Buttons
*/
button.chip{
display: inline-block;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 15px;
font-weight: bold;
border-radius: 50%;
height: 52px;
width: 52px;
margin: 5px;
cursor: pointer;
transition-duration: .5s;
}
#one {
background-color: rgba(34,31,32,0.95);
color:white;
border: 5px solid rgba(209,212,213,0.95);
}
#five {
background-color: rgba(242,122,128,0.95);
color: rgba(148,30,28,0.95);
border: 5px solid rgba(235,53,45,0.95);
}
#ten {
background-color: rgba(169,219,203,0.95);
color: rgba(13,45,76,0.95);
border: 5px solid rgba(3,90,136,0.95);
}
#twentyfive {
background-color: rgba(235,232,64,0.95);
color: rgba(51,123,18,0.95);
border: 5px solid rgba(57,134,63,0.95);
}
#hundred {
background-color: #fdf049;
color: rgb(235,53,45);
border: 5px solid rgb(235,53,45);
}
#fivehundred {
background-color: #b6b0d5;
color: rgb(71,45,126);
border: 5px solid rgb(126,70,155);
}
#thousand {
background-color: #fffef6;
color: rgb(34,31,31);
border: 5px solid #59585a;
}
button.bet {
display: inline-block;
border-radius: 10px;
border: 4px solid saddlebrown;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 14px;
font-weight: bold;
height: 50px;
width: 100px;
margin: 5px;
cursor: pointer;
transition-duration: .5s;
}
#submit {
background-color: #358535;
}
#reset {
background-color: yellow;
}
#hit {
background-color: lightcoral;
}
#stand {
background-color: lightgreen;
}
.card{
background-color: white;
width:40px;
height:60px;
border:1px solid #151718;
float:left;
border-radius:2px;
}
.number, .suit{
width:100%;
display:block;
text-align:center;
padding-top:8px;
}
button:hover {
background-color: white;
}<!DOCTYPE html>
<html lang="en">
<!-- CS 81 Final Project - Noah Derby-->
<!-- A simple blackjack game. I hope you enjoy!!!!!!-->
<head>
<meta charset="UTF-8">
<title>Blackjack!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Blackjack!</header>
<div class="economyWrap">
<div class="earningsContainer">
<label for="bank" style="font-size: 25px;">Your Balance is: $ </label><input type="number" id="bank" value="1000" style="width: 100px;" disabled>
</div>
<div class="chipContainer">
<button id="one" class="chip">1</button>
<button id="five" class="chip">5</button>
<button id="ten" class="chip" >10</button>
<button id="twentyfive" class="chip">25</button>
<button id="hundred" class="chip">100</button>
<button id="fivehundred" class="chip">500</button>
<button id="thousand" class="chip">1k</button>
</div>
<div class="submitContainer">
<label for="betAmount" style="font-size: 25px;">Bet Amount: $ </label><input type="number" id="betAmount" value="0" style="margin:5px; width: 100px;" disabled>
<button id="reset" class="bet">Reset</button>
<button id="submit" class="bet">Submit</button>
</div>
</div>
<div class="playWrap">
<div class="dealerContainer">
<label for="dealerTotal">Dealer Total: </label><input value="0" id="dealerTotal" style=" width: 50px;" disabled>
<div class="dealerCards"></div>
</div>
<div class="playerContainer" style="position: absolute; bottom:0;">
<label for="playerTotal">Your Total: </label><input value="0" id="playerTotal" style="bottom:0; width: 50px;" disabled>
<div class="playerCards"></div>
</div>
<div class="playButtonContainer">
<button class="bet" id="hit" style="background-color: lightgreen;">Hit</button>
<button class="bet" id="stand" style="background-color: lightcoral;">Stand</button>
</div>
</div>
<div class="textContainer">
<h2>Welcome to Blackjack!</h2>
<h4>
To start, click the corresponding chips to place your bets and click "Submit" to start the game!
The goal is to reach 21, so you can decide to either hit (gain another card) or stand (wait for the dealer).
Whoever is closer to 21 without going over wins!
</h4>
</div>
</body>
<script src="main.js"></script>
</html>uj5u.com熱心網友回復：
問題- ID 是否覆寫 :hover 更改？
答案- a:hover 的樣式規則將覆寫該段落，只要它寫在 CSS 中 p 或 #id 的規則之后。問題在于處理您的 :hover 行為的選擇器的特異性低于默認行為的規則（p#id 選擇器）。
問題- 如果是這樣，我需要重新格式化所有按鈕嗎？
回答- 不，您不需要重新格式化所有按鈕，因為您可以在按鈕上使用 !important:hover 在 CSS 檔案中。
/*
CS 81 Final - Noah Derby
*/
//Global Variables
"use strict";
let gameActive = false;
let dealerValue = 0;
let playerValue = 0;
let buttons = document.getElementsByTagName('button');
let totalAmount = document.getElementById('betAmount');
let bank = document.getElementById('bank');
//Card Functions and
function Card(value, name, suit) {
this.value = value;
this.name = name
this.suit = suit
}
function newDeck() {
let suits = ['Hearts','Diamonds','Spades','Clubs'];
let names = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
let deck = []
for(let i of suits) {
for(let n=0; n < names.length; n ) {
deck.push(new Card(n 1, names[n], i));
}
}
for (let i = deck.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i 1));
const temp = deck[i];
deck[i] = deck[j];
deck[j] = temp;
}
return deck;
}
function addTo(player, card){
let ascii_char;
let div = document.createElement('card');
div.className = 'card';
if(card.suit === 'Diamonds'){
ascii_char = "♦";
div.style.color = 'red';
} else if (card.suit === 'Hearts') {
ascii_char = '♥'
div.style.color = 'red';
} else {
ascii_char = "&" card.suit.toLowerCase() ";"
}
div.innerHTML = "<span class='number'>" card.name "</span><span class='suit'>" ascii_char "</span>";
if(player.id === "dealerTotal"){
document.querySelector(".dealerCards").appendChild(div);
} else {
document.querySelector(".playerCards").appendChild(div);
}
if (card.value > 10){
player.value = parseInt(player.value, 10) 10;
} else if (card.value === 1) {
let handValue = parseInt(player.value, 10);
if(handValue <= 10) {
player.value = handValue 11
} else {
player.value = handValue 1
}
} else {
player.value = parseInt(player.value, 10) card.value;
}
}
function clearCards() {
document.querySelector(".dealerCards").innerHTML = "";
document.querySelector(".playerCards").innerHTML = "";
}
//Button Handlers
for (let i=0; i < buttons.length; i ) {
buttons[i].addEventListener('click', () => {
let playerTotal = document.getElementById("playerTotal");
let dealerTotal = document.getElementById("dealerTotal");
let bankValue = parseInt(bank.value, 10);
let amountValue = parseInt(totalAmount.value, 10);
let cards = newDeck();
switch (buttons[i].id) {
case "one":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 1;
break;
}
break;
case "five":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 5;
break;
}
break;
case "ten":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 10;
break;
}
break;
case "twentyfive":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 25;
break;
}
break;
case "hundred":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 100;
break;
}
break
case "fivehundred":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 500;
break;
}
break;
case "thousand":
if(!gameActive){
totalAmount.value = parseInt(totalAmount.value, 10) 1000;
break;
}
break;
case "reset":
if (!gameActive){
totalAmount.value = 0;
break;
}
break;
case "submit":
if(!gameActive){
if (bankValue === 0) {
alert("No funds available :(");
break;
} else if (amountValue === 0) {
alert("Please Enter a valid amount")
break;
} else if(amountValue > bankValue){
totalAmount.value = bank.value;
bank.value = 0;
} else{
bank.value = bankValue - amountValue;
}
clearCards();
playerTotal.value = dealerTotal.value = '0';
addTo(playerTotal, cards.pop());
addTo(playerTotal, cards.pop());
addTo(dealerTotal, cards.pop());
dealerTotal.style.color = "transparent";
gameActive = true;
break;
}
break;
case "hit":
if(gameActive) {
addTo(playerTotal, cards.pop())
if(parseInt(playerTotal.value, 10) > 21){
alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
dealerTotal.style.color = "black";
totalAmount.value= '0';
gameActive = false;
break;
}
}
break;
case 'stand':
if (gameActive) {
playerValue = parseInt(playerTotal.value, 10);
while(parseInt(dealerTotal.value, 10) <= 17){
addTo(dealerTotal, cards.pop());
}
dealerValue = parseInt(dealerTotal.value, 10);
if (dealerValue > 21){
alert(`You won $${amountValue*2}!!!`);
bank.value = bankValue amountValue * 2;
totalAmount.value = 0;
gameActive = false;
dealerTotal.style.color = "black";
break;
}
if (playerValue < dealerValue) {
alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
totalAmount.value= '0';
} else if (playerValue > dealerValue) {
alert(`You won $${amountValue*2}!!!`);
bank.value = bankValue amountValue * 2;
totalAmount.value = '0';
} else {
alert(`Its a tie! Funds refunded!`);
bank.value = bankValue amountValue;
totalAmount.value= '0';
}
dealerTotal.style.color = "black";
gameActive = false;
}
break;
}
}, false)
}/* CS 81 Final - Noah Derby */
body {
background-image: url('https://cdn.hipwallpaper.com/i/46/65/hEiUkp.jpg');
background-size: cover;
font-family: Verdana, sans-serif, bold;
font-weight: bold;
margin: 5px;
}
header {
text-align: center;
font-size: 50px;
margin: 50px 500px -50px;
}
label{
font-size: 25px;
}
input{
font-size: 25px;
color: black;
background-color: white;
}
div {
margin: 5px;
}
.economyWrap{
position: relative;
float: left;
width: 480px;
height: 500px;
top: 100px;
left: 50px;
}
.playWrap{
position: relative;
border: 5px solid black;
float: left;
top: 100px;
width: 260px;
height: 300px;
margin-left: 140px;
}
.textContainer{
padding: 5px;
background: rgba(0, 128, 0, 0.02);
margin: 200px 0 0 125px;
width: 400px;
float: left;
}
.playButtonContainer{
position: absolute;
margin: 17px;
bottom:-90px;
}
.earningsContainer{
position: absolute;
width: 450px;
height: 35px;
padding: 5px;
top:0;
left:85px;
}
.submitContainer {
margin: auto;
position: absolute;
width: 340px;
bottom: 220px;
left: 120px;
}
.chipContainer{
margin: auto;
position: absolute;
height: 210px;
width: 250px;
left: 140px;
bottom: 0;
}
/*
Buttons
*/
button.chip{
display: inline-block;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 15px;
font-weight: bold;
border-radius: 50%;
height: 52px;
width: 52px;
margin: 5px;
cursor: pointer;
transition-duration: .5s;
}
#one {
background-color: rgba(34,31,32,0.95);
color:white;
border: 5px solid rgba(209,212,213,0.95);
}
#five {
background-color: rgba(242,122,128,0.95);
color: rgba(148,30,28,0.95);
border: 5px solid rgba(235,53,45,0.95);
}
#ten {
background-color: rgba(169,219,203,0.95);
color: rgba(13,45,76,0.95);
border: 5px solid rgba(3,90,136,0.95);
}
#twentyfive {
background-color: rgba(235,232,64,0.95);
color: rgba(51,123,18,0.95);
border: 5px solid rgba(57,134,63,0.95);
}
#hundred {
background-color: #fdf049;
color: rgb(235,53,45);
border: 5px solid rgb(235,53,45);
}
#fivehundred {
background-color: #b6b0d5;
color: rgb(71,45,126);
border: 5px solid rgb(126,70,155);
}
#thousand {
background-color: #fffef6;
color: rgb(34,31,31);
border: 5px solid #59585a;
}
button.bet {
display: inline-block;
border-radius: 10px;
border: 4px solid saddlebrown;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 14px;
font-weight: bold;
height: 50px;
width: 100px;
margin: 5px;
cursor: pointer;
transition-duration: .5s;
}
#submit {
background-color: #358535;
}
#reset {
background-color: yellow;
}
#hit {
background-color: lightcoral;
}
#stand {
background-color: lightgreen;
}
.card{
background-color: white;
width:40px;
height:60px;
border:1px solid #151718;
float:left;
border-radius:2px;
}
.number, .suit{
width:100%;
display:block;
text-align:center;
padding-top:8px;
}
button:hover {
background-color: white !important;
}<!DOCTYPE html>
<html lang="en">
<!-- CS 81 Final Project - Noah Derby-->
<!-- A simple blackjack game. I hope you enjoy!!!!!!-->
<head>
<meta charset="UTF-8">
<title>Blackjack!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Blackjack!</header>
<div class="economyWrap">
<div class="earningsContainer">
<label for="bank" style="font-size: 25px;">Your Balance is: $ </label><input type="number" id="bank" value="1000" style="width: 100px;" disabled>
</div>
<div class="chipContainer">
<button id="one" class="chip">1</button>
<button id="five" class="chip">5</button>
<button id="ten" class="chip" >10</button>
<button id="twentyfive" class="chip">25</button>
<button id="hundred" class="chip">100</button>
<button id="fivehundred" class="chip">500</button>
<button id="thousand" class="chip">1k</button>
</div>
<div class="submitContainer">
<label for="betAmount" style="font-size: 25px;">Bet Amount: $ </label><input type="number" id="betAmount" value="0" style="margin:5px; width: 100px;" disabled>
<button id="reset" class="bet">Reset</button>
<button id="submit" class="bet">Submit</button>
</div>
</div>
<div class="playWrap">
<div class="dealerContainer">
<label for="dealerTotal">Dealer Total: </label><input value="0" id="dealerTotal" style=" width: 50px;" disabled>
<div class="dealerCards"></div>
</div>
<div class="playerContainer" style="position: absolute; bottom:0;">
<label for="playerTotal">Your Total: </label><input value="0" id="playerTotal" style="bottom:0; width: 50px;" disabled>
<div class="playerCards"></div>
</div>
<div class="playButtonContainer">
<button class="bet" id="hit" style="background-color: lightgreen;">Hit</button>
<button class="bet" id="stand" style="background-color: lightcoral;">Stand</button>
</div>
</div>
<div class="textContainer">
<h2>Welcome to Blackjack!</h2>
<h4>
To start, click the corresponding chips to place your bets and click "Submit" to start the game!
The goal is to reach 21, so you can decide to either hit (gain another card) or stand (wait for the dealer).
Whoever is closer to 21 without going over wins!
</h4>
</div>
</body>
<script src="main.js"></script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/425236.html
標籤：javascript html css 按钮
下一篇：HTML中按鈕的惱人藍色