Button's color doesn't change in css, javascript-CodePudding

I'm new to web and css. I've tried to make my button prettier, but the color of the button didn't change. Sorry if it was just my foolish mistake.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Search Maker</title>
</head>
<body>
    <div >
        <h1>
            Simple Word Search maker
        </h1>
    </div>
    <div >
        <button id="start-button">Start ➝</button>    
    </div>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</body>
</html>

style.css:

html {
    background-color: lavender;
}
#start-button {
    background-color: transparent;
    border: solid 1px black;
    border-radius: 6px;
    width: 100px;
    height: 25px;
    box-align: center;
    font-size: 15px;
    text-align: center;
}

.start {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.title-h1 {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.active {
    background-color: #374151;
    border: solid 1px black;
    border-radius: 6px;
    width: 100px;
    height: 25px;
    box-align: center;
    font-size: 15px;
    text-align: center;
    transition: 0.5s;
    color: white;
}

script.js

const startButton = document.querySelector("#start-button");
const activeclass = "active";

function handlestartBtnMouseEnter() {
    startButton.classList.add(activeclass);

}

function handlestartBtnMouseLeave() {
    startButton.classList.remove(activeclass);
}

startButton.addEventListener("mouseenter", handlestartBtnMouseEnter);
startButton.addEventListener("mouseleave", handlestartBtnMouseLeave);

This code changed text's color to white, but button's color didn't changed. I saw class was added. Sorry for grammers and spell errors. English is not my first language.

CodePudding user response：

After you add the .active class with JavaScript your element has a class and an ID in which case the ID is prioritized. Since your element didn't have a font color it applies it but it can't overwrite your background-color.

I suggest to not use JavaScript at all here unless you have a special reason. Just use the pseudo class :hover like this:

#start-button:hover {
    background-color: #374151;
    transition: 0.5s;
    color: white;
}

In case you want to use JavaScript anyways you can fix your specificity issue by updating the selector as mentioned in another answer:

#start-button.active {
    background-color: #374151;
    transition: 0.5s;
    color: white;
}

CodePudding user response：

use to peseudo-class go to link:enter link description here

#start-button:active {
  // your style ------
}

CodePudding user response：

It is because when the mouse enters the button, the first background color that is being applied on the button is the transparent color that is stated in #start-button. The way css work, it will apply the first property it catch for a specific element if it is mentioned twice in in different classes so to force css to apply the color you want when the active class is triggered you should add !important to the background-color in the active class like this:

background-color: #374151 !important;

CodePudding user response：

const startButton = document.querySelector("#start-button");
const activeclass = "active";

function handlestartBtnMouseEnter() {
    startButton.classList.add(activeclass);

}

function handlestartBtnMouseLeave() {
    startButton.classList.remove(activeclass);
}

startButton.addEventListener("mouseenter", handlestartBtnMouseEnter);
startButton.addEventListener("mouseleave", handlestartBtnMouseLeave);

html {
    background-color: lavender;
}
#start-button {
    background-color: transparent;
    border: solid 1px black;
    border-radius: 6px;
    width: 100px;
    height: 25px;
    box-align: center;
    font-size: 15px;
    text-align: center;
}

.start {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.title-h1 {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

#start-button.active {
    background-color: #374151;
    border: solid 1px black;
    border-radius: 6px;
    width: 100px;
    height: 25px;
    box-align: center;
    font-size: 15px;
    text-align: center;
    transition: 0.5s;
    color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Search Maker</title>
</head>
<body>
    <div >
        <h1>
            Simple Word Search maker
        </h1>
    </div>
    <div >
        <button id="start-button">Start ➝</button>    
    </div>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</body>
</html>

CodePudding user response：

If you want to change background color

background-color: lavender /* or any color */

If you want to make background transparent

 html {
 background-color: lavender; /* or any color */
 }

 background-color: rgba(255, 255, 255, 0);