Retain CSS :hover when changing CSS styles with Javascript

Question

I have a div (acting as a button) which has certain CSS that activates when hovered on:

#btn{
    width: 80%;
    height: 125px;
    border: 1px solid #9676E8;
    border-radius: 10px;
    transition: background-color 0.25s ease;
    background-color: #B299F2;
    color: white;
}

#btn:hover{
    background-color: #9676E8;
}

Note: #9676E8 is a darker shade of #B299F2, both blue.

This button has a toggle function, where the desired effect is that clicking it will toggle its background to become red instead of blue. The relevant JavaScript is here:

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
    if(!toggle){
        toggle = true;
        btn.style.border = "1px solid #FF0000";
        btn.style.backgroundColor = "#AA3030";
    } else {
        toggle = false;
        btn.style.border = "1px solid #9676E8";
        btn.style.backgroundColor = "#B299F2";
    }
});

Note: #AA3030 and #FF0000 are shades of red.

My problem is that after clicking the button the first time, the button turns red (as desired). However, when clicking it so it changes back to blue, there is no more hover effect afterward. Hovering over it doesn't do anything but clicking it still works.

I do not need the button to have a hover effect while it is red, but I want to retain the hover effect while it is blue. Is there any way of doing so?

JsFiddle Here

Set up a demo on jsfiddle or codepen and we will gladly help you solve your problems — AlphaG33k
– AlphaG33k, Commented Jun 23, 2015 at 0:17
I will suggest using a class, put the colors in a class then add and remove the class in JS toggle. — IROEGBU
– IROEGBU, Commented Jun 23, 2015 at 0:17
@iroegbu but if I simply change the class, the transition effect won't take anymore. — user2490157
– user2490157, Commented Jun 23, 2015 at 0:18

Okku · Accepted Answer · 2015-06-23 00:27:03Z

3

This is because the inline rule set by JS overrides any CSS rules (unless they have the !important declaration). Instead of setting the color back to the same value, set it to empty to reset it:

else {
    toggle = false;
    btn.style.border = "";
    btn.style.backgroundColor = "";
}

edited Jun 23, 2015 at 0:27

answered Jun 23, 2015 at 0:20

Okku

7,8744 gold badges33 silver badges43 bronze badges

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

Comments

IROEGBU · Accepted Answer · 2015-06-23 00:33:19Z

If you use classes instead of setting CSS properties in you JS it can be achieved by changing classes on toggle.

<!-- html -->
<div id="btn" class="blue"></div>

/* Javascript */
var toggle = false;
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
    if(!toggle){
        toggle = true;
        btn.className = "red";
    } else {
        toggle = false;
        btn.className = "blue";
    }
});

/* style */
#btn{
    width: 80%;
    height: 125px;
    border-radius: 10px;
    transition: background-color 0.25s ease;
    color: white;
}
.blue {
    border: 1px solid #9676E8;
    background-color: #B299F2;
}
.red {
    border: 1px solid #FF0000;
    background-color: #AA3030;
}

.blue:hover{
    background-color: #9676E8;
}

Collectives™ on Stack Overflow

Retain CSS :hover when changing CSS styles with Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related