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

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  action="/signup" id="new_box" method="post">
            <div >

                <div  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  id="new_item_2">
                    <input  id="first_name" placeholder="first name" name="name" required></input>
                    <input  id="last_name"  placeholder="Surname" name="second_name" required></input>
                </div>
                <input  id="new_item_3"  placeholder="Mobile number or email address" name="mail" type="email" required></input>
                
                <div    id="new_item_4">
                    <input  placeholder="New Password" id="item_4_1" onkeyup="check_input()" name="word" required></input>               
                    <div  id="item_4_2">too short</div>
                </div>
                <div    id="new_item_5">
                    <div  id="item_5_1">Date of birth</div>
                    <input type="date"  id="item_5_2" name="date" required></input>                
                </div>
                <div  id="new_item_6">
                    <div id="item_6_1">Gender</div>
                    <div id="item_6_2">
                        <div  id="item_6_2_1">
                            
                            <label >
                                <input type="radio" name="gender" value="Male" required></input>
                                <span > </span>
                            </label>
                            <div >Male</div>
                            
                        </div>
                        <div  id="item_6_2_2">
                            <label >
                                <input type="radio" value="Female" name="gender"></input>
                                <span > </span>
                            </label>
                            <div >Female</div>
                        </div>
                        <div  id="item_6_2_3">
                            <label >
                                <input type="radio" value="custom" name="gender"></input>
                                <span > </span>
                            </label>
                            <div >Custom</div>
                        </div>
                    </div>
                </div>
                <button type="submit"   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;
}

CodePudding user response：

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

CodePudding user response：

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 onm ouseover = "this.className = 'hover';" onm ouseout = "this.className = ' ';" >Hello World </p>

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