Reputation: 745
It's just a simple question. I made a button using <a>
with background image. It should use different image when it is clicked. I use :active
property in its css. But the thing is even after the button is not pressed (release), the :active
class is still there. So it is still using the image for the status.
How come? And how I should do it, when I only want to apply the class when the button is pressed?
Thank you. I hope I have explained it well enough.
Upvotes: 1
Views: 2154
Reputation: 252
works fine for me: Demo
button {
background-color: blue;
border: none;
color: #FFF;
}
button:hover {
background-color: green
}
button:active {
background-color: red
}
Can you provide a Demo to have a look in to it?
Upvotes: 1
Reputation: 19366
catwoman, if you just want it while pressed active should work. if you're looking for toggle, then you need what's below.
CSS doesn't have a selector that toggles, except for :checked
on checked inputs.
You need Javascript:
<a href="#" onclick="toggle_class('foo');"
or to use jQuery Toggle: http://api.jquery.com/toggle/
--
then again, if you are actually looking for button pressed, active should work. paste your code here and we can check it out. if you're doing something that can't be performed solely with css :active pseudoclass, look at the mousedown event: http://api.jquery.com/mousedown/
Upvotes: 2