Does #id override the :hover change?-CodePudding

I've seen different similar answers but none with the level of nesting I'm dealing with. I have two sets of buttons, circular ones and rectangular ones that I want the background to change to white on hover. The only thing I have been able to successfully change is the text color for the rectangular ones.

I previously had the button styles inline and thought that was the issue. Guess not :/

Does the ID override the :hover change? And if so do I need to reformat all of my buttons? Thank you!

(previous code solutions involve jquery and I have no knowledge of it whatsoever)

/*
    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 = "&diams;";
        div.style.color = 'red';
    } else if (card.suit === 'Hearts') {
        ascii_char = '&hearts;'
        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 >
    <div >
        <label for="bank" style="font-size: 25px;">Your Balance is: $ </label><input type="number" id="bank" value="1000" style="width: 100px;" disabled>
    </div>
    <div >
        <button id="one" >1</button>
        <button id="five" >5</button>
        <button id="ten"  >10</button>
        <button id="twentyfive" >25</button>
        <button id="hundred" >100</button>
        <button id="fivehundred" >500</button>
        <button id="thousand" >1k</button>
    </div>
    <div >
        <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" >Reset</button>
        <button id="submit" >Submit</button>
    </div>
</div>

<div >
    <div >
        <label for="dealerTotal">Dealer Total: </label><input value="0" id="dealerTotal" style=" width: 50px;" disabled>
        <div ></div>
    </div>
    <div  style="position: absolute; bottom:0;">
        <label for="playerTotal">Your Total: </label><input value="0" id="playerTotal" style="bottom:0; width: 50px;" disabled>
        <div ></div>
    </div>
    <div >
        <button  id="hit" style="background-color: lightgreen;">Hit</button>
        <button  id="stand" style="background-color: lightcoral;">Stand</button>
    </div>
</div>

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

CodePudding user response：

Question - Does the ID override the :hover change?

Answer - The style rule for a:hover will override the paragraph as long as it is written in the CSS after the rule for p or #id. The problem is that the selector handling your :hover behavior has a lower Specificity than the rule for the default behavior (p#id selector).

Question - If so do I need to reformat all of my buttons?

Answer - No, you don't need to reformat all the buttons as you can use !important on the button:hover in the CSS file.

/*
    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 = "&diams;";
        div.style.color = 'red';
    } else if (card.suit === 'Hearts') {
        ascii_char = '&hearts;'
        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 >
    <div >
        <label for="bank" style="font-size: 25px;">Your Balance is: $ </label><input type="number" id="bank" value="1000" style="width: 100px;" disabled>
    </div>
    <div >
        <button id="one" >1</button>
        <button id="five" >5</button>
        <button id="ten"  >10</button>
        <button id="twentyfive" >25</button>
        <button id="hundred" >100</button>
        <button id="fivehundred" >500</button>
        <button id="thousand" >1k</button>
    </div>
    <div >
        <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" >Reset</button>
        <button id="submit" >Submit</button>
    </div>
</div>

<div >
    <div >
        <label for="dealerTotal">Dealer Total: </label><input value="0" id="dealerTotal" style=" width: 50px;" disabled>
        <div ></div>
    </div>
    <div  style="position: absolute; bottom:0;">
        <label for="playerTotal">Your Total: </label><input value="0" id="playerTotal" style="bottom:0; width: 50px;" disabled>
        <div ></div>
    </div>
    <div >
        <button  id="hit" style="background-color: lightgreen;">Hit</button>
        <button  id="stand" style="background-color: lightcoral;">Stand</button>
    </div>
</div>

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