Does #id override the :hover change?

Question

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