Hover effect not working if i use class to trigger it in css

Question

I am trying to add or remove hover effect from a button using js but and i am using .classlist.remove('class name') command for that and for that i am trying to trigger the hover effect of my button using class but the problem is the hover effect is not triggering if i am connecting it with its class but it works perfectly if i connect the same button with its id i dont understand why is this happening here is my HTML code:-

<form class="new_account_box" action="/signup" id="new_box" method="post">
            <div class="dialog_box">

                <div class="new_acccount_item" id="new_item_1">
                    <div id="item_1_1">Sign Up</div>
                    <div id="item_1_2" onclick="closed()"><img src="./icons/close.svg" alt=" "  ></div>
                </div>
                <div class="new_acccount_item" id="new_item_2">
                    <input class="names" id="first_name" placeholder="first name" name="name" required></input>
                    <input class="names" id="last_name"  placeholder="Surname" name="second_name" required></input>
                </div>
                <input class="input_fields" id="new_item_3"  placeholder="Mobile number or email address" name="mail" type="email" required></input>
                
                <div   class="new_acccount_item" id="new_item_4">
                    <input class="input_fields" placeholder="New Password" id="item_4_1" onkeyup="check_input()" name="word" required></input>               
                    <div class="item_4_content" id="item_4_2">too short</div>
                </div>
                <div   class="new_acccount_item" id="new_item_5">
                    <div class="item_5_content" id="item_5_1">Date of birth</div>
                    <input type="date" class="input_fields" id="item_5_2" name="date" required></input>                
                </div>
                <div class="new_acccount_item" id="new_item_6">
                    <div id="item_6_1">Gender</div>
                    <div id="item_6_2">
                        <div class="item_6_2_content" id="item_6_2_1">
                            
                            <label class="gender">
                                <input type="radio" name="gender" value="Male" required></input>
                                <span class="checkmark"> </span>
                            </label>
                            <div class="gender_text">Male</div>
                            
                        </div>
                        <div class="item_6_2_content" id="item_6_2_2">
                            <label class="gender">
                                <input type="radio" value="Female" name="gender"></input>
                                <span class="checkmark"> </span>
                            </label>
                            <div class="gender_text">Female</div>
                        </div>
                        <div class="item_6_2_content" id="item_6_2_3">
                            <label class="gender">
                                <input type="radio" value="custom" name="gender"></input>
                                <span class="checkmark"> </span>
                            </label>
                            <div class="gender_text">Custom</div>
                        </div>
                    </div>
                </div>
                <button type="submit"  class="hover" id="new_item_7" >
                    <div id="button_text">Sign Up</div>
                </button>
            </div>
        </form>

CSS code (hover code is in the end of this code) :-

.new_account_box{
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    
}

.dialog_box{
width: 27%;
height: 65%;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
margin: auto;
display: grid;
grid-template-rows: repeat(7,1fr);
background-color: white;

}

#new_item_1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    height: fit-content;
}

#item_1_1{
    color: black;
    font-size: 2rem;
    font-weight: 900;
}

#item_1_1::after{
    content: "It's quick and easy";
    display: block;
    margin-top: 2%;
    font-size: .8rem;
    color: #606770;
}

#item_1_2{
    display: flex;
    justify-content: flex-end;
}
#item_1_2 img{
    cursor: pointer;
}

#item_1_2 img{
    height: 30%;
}

#new_item_2{
    display: grid;
    grid-template-columns: repeat(2,auto);
}

.names{
    border: 2px solid #d9d9d9;
    width: 80%;
    height: 50%;
    display: flex;
    justify-self: center;
    border-radius: 5px;
    margin: auto;
    background-color: #f1f3f4;
    
}

.input_fields{
    border: 2px solid #d9d9d9;
    width: 85%;
    height: 55%;
    display: flex;
    justify-self: center;
    border-radius: 5px;
    margin: auto;
    background-color: #f1f3f4;
}

#item_4_2{
    display: none;
    margin-bottom: 1%;
    margin-left: 4%;
    font-size: .8rem;
    font-weight: 700;
    color: red;
}

#item_5_1{
    margin-bottom: 1%;
    margin-left: 5%;
    font-size: .8rem;
    color: #606770;
}


#new_item_6{
    display: grid;
    grid-template-rows: 1fr 1.5fr
}

#item_6_1{
    margin-left: 5%;
    color: #606770;
    font-size: .9rem;
}

#item_6_2{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 95%;
    justify-self: center;
    gap: 2%;
}

.item_6_2_content{
    border: 2px solid #d9d9d9;
    border-radius: 3px;
    margin-left: 15%;
    display: grid;
    grid-template-columns: 2fr 1fr
}
.checkmark{
    width: 70%;
    height: 70%;
    background-color: #1877f2;
    display: none;
    border-radius: 50%;
    
}

.gender{
    
    width: 20%;
    height: 30%;
    border: 2px solid black;
    margin-left: 5%;
    margin-top: 8%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    
}

.gender input:checked + .checkmark{
    display: inline-block;
}

.gender input{
    display: none;
}

.gender_text{
    /* border: 2px solid black; */
    display: flex;
    align-items: center;
    margin-right: 10px;
    
}

#new_item_7{
    background-color: #42b72a;
    width: 40%;
    display: flex;
    margin: auto;
    height: 50%;
    border-radius: 5px;
    border: none;
}


#button_text{
    color: white;
    font-weight: 900;
    font-size: 1rem;
    margin: auto;
    border: 0px;
}

input:focus{
    outline: none;
}
#new_item_7{
    cursor: pointer;
}



/* not working if i use this */



.hover:hover{
    background-color: #30ce11;
}



/* hover works if i use this */




#new_item_7:hover{
    background-color: #30ce11;
}

Answer 1

Your problem is one of CSS specificity.

There is a priority order on what selectors take precedence over which others.

In your case the element with id new_item_7 sets a background color. When the CSS sees the .hover selector it takes not notice of the background color setting because, although it comes further down the cascade, the class has a lower weighting than the id.

I would suggest using:

#new_item_7.hover:hover{
    background-color: #30ce11;
}

Then when you come to toggle hover in your JS the system will be sure to pick up this (even more specific) selector.

See MDN for more info on this

Answer 2

Firstly you will have to create a hover class

.hover{
background: red;
font-weight: bold;
font-size: 3em;
}

Then you'll add the hover effect with onmouseover and onmouseout. Example:

<p onmouseover = "this.className = 'hover';" onmouseout = "this.className = ' ';" >Hello World </p>

This would work, but it's much advisable to use just CSS http://jsfiddle.net/42jLY/