I'm trying to get a button to stay pushed down when clicked on. However, the box-shadow portion in what I'm working with, and the CSS active state part are both confusing me.
I know this is doable considering this code: http://jsfiddle.net/UEkBQ/
This is the code I'm working with: http://jsfiddle.net/frnYf/
It seems that the CSS "#button:active" is constantly functional, while I only want it to be toggled when clicked on.
The first fiddle works because
make-me-green is a css class name, and can be targetted by css rules, where as
#button:active is not a class name (its a css selector consisting of a tag id and a pseudoclass).
Change your css rule from
#button.some-css-class-name and the js to
The reason you need
#button.some-css-class-name and not just
.sone-css-class-name is that
# selectors have a higher priority than
In response to your question about the
<div id="blah" class="blah">hello</div>
we can target this div with its class or its id, to tell css which we use a
. for a class or
# for an id.
Or try: http://jsfiddle.net/frnYf/35/
©2020 All rights reserved.