开发者

which css style handles the click event on a button? other than hover

开发者 https://www.devze.com 2023-01-20 00:17 出处:网络
I see this site that has a button开发者_如何学JAVA, when I hover over it the background changes.

I see this site that has a button开发者_如何学JAVA, when I hover over it the background changes.

When I click on the button, the button shading inverts i.e. reacts to the click event.

Which CSS style is this? I know :hover is for hover, but what about a click?


CSS3 does handle activation events now (2013).

The :active pseudo-class is working on any css selector like BUTTONs, not just A tags.

CSS3 STYLE

p { margin: 2em; }
button { background-color: White; color: SteelBlue; }
button:hover { background-color: LightSteelBlue; }
button:active { background-color: SteelBlue; color: White; }

HTML5

    <p>
        <button>test button with :active pseudo-class</button>
    </p>

Demo: http://jsfiddle.net/wp86u/

See: http://www.w3schools.com/css/css_pseudo_classes.asp (content changed since Diodeus answer)


CSS does not handle events.

You're looking for the :active pseudo class, which is only for the A-tag, not buttons. You can style A tags to look like buttons as well though.

See: http://w3schools.com/CSS/css_pseudo_classes.asp


What you're looking at is the browser's default styles for the :active pseudo-class, which also applies to keyboard input on a button (try tabbing to it and pressing the spacebar).

These pseudo-classes do NOT just apply to the anchor element, it's a common misconception caused by old versions of IE not supporting them on anything other than the anchor element.

0

精彩评论

暂无评论...
验证码 换一张
取 消