CSS按钮永久按下状态 [英] CSS button permanently pushed down state

问题描述

我试图获得一个按钮，点击时保持按下。但是，我在使用的盒阴影部分和CSS活动状态部分都让我困惑。

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.

我知道这是可以考虑这个代码： http://jsfiddle.net/UEkBQ/

I know this is doable considering this code: http://jsfiddle.net/UEkBQ/

这是我使用的代码： http://jsfiddle.net/frnYf/

看来CSS#button：active是不断运行的，而我只希望在点击时切换它。

It seems that the CSS "#button:active" is constantly functional, while I only want it to be toggled when clicked on.

推荐答案

第一个小提琴起作用，因为 make-me-green 是一个css类名，可以通过css规则，其中 #button：active 不是类名称（其由标记id和伪类型组成的css选择器）。

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).

将您的css规则从 #button：active 更改为＃button.some-css-class-name and the js to $（this）.toggleClass（'some-css-class-name'）;

Change your css rule from #button:active to #button.some-css-class-name and the js to $(this).toggleClass('some-css-class-name');

你需要的原因＃button.some-css-class-name 而不只是 .sone-css-class-name 是＃选择器的优先级高于。选择器。

The reason you need #button.some-css-class-name and not just .sone-css-class-name is that # selectors have a higher priority than . selectors.

回应您对的问题。 ...

<div id="blah" class="blah">hello</div>

我们可以使用它的类或其id来定位这个div，告诉css我们使用<$

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.

或。

这篇关于CSS按钮永久按下状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！