st4rgut st4rgut - 28 days ago 13
Javascript Question

What is the purpose of .active along with .hover?

I am going through the w3 accordion example and ran into this confusing bit of css. The user clicks on the buttons to show the hidden text inside a sibling div. What I'm having trouble understanding is what purpose button.accordion.active serves in the CSS code below. I know .active is used to indicate when certain elements like links are activated. Is it necessary in this case though because it works fine without that bit of code. Thanks for helping me learn.

Here's the link to the entire example and below is the css for the button

button.accordion.active, button.accordion:hover {
background-color: #ddd;
}

K48 K48
Answer

Otherwise the color of the element would be different when the user points the mouse at the element, and while the user holds down the mouse button.