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

When you are trying to select in JS using the hover class what error are you seeing on your browser's dev tools inspect facility console.? \you can't expect to remove the hover class and then select on it - but that may not be the problem. It's important that we are shown the relevant JS. — A Haworth
– A Haworth, Commented Jan 6, 2022 at 8:09
Thanks for replying the thing is the problem is not connected with js here i, removed all of my js from this file just to check that , the problem is lying with just the class itself as far as i can understand because when i run the same hover effect with id it works but not with the class — Samyak jain
– Samyak jain, Commented Jan 6, 2022 at 8:51

A Haworth · Accepted Answer · 2022-01-06 10:21:53Z

2

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

edited Jan 6, 2022 at 10:21

answered Jan 6, 2022 at 10:16

A Haworth

37.6k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Samyak jain Over a year ago

Thanks a lot i didn't knew about this concept

Junaid Shaikh Over a year ago

you should not style using id, its not good, use class name to style your divs

A Haworth Over a year ago

@JunaidShaikh - could you explain why using an id is incorrect? If the element is the only example of its type in the document then it is perfectly correct AFAIK and in this case it was essential to override the previous setting. Do you have a reference we could look at?

abrahamebij · Accepted Answer · 2022-01-06 07:45:37Z

1

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/

answered Jan 6, 2022 at 7:45

abrahamebij

1531 silver badge9 bronze badges

1 Comment

Samyak jain Over a year ago

Ohh thanks I'll try it

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related