CSS 按下 <button> 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15463854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pressed <button> selector
提问by Kyrbi
I'd like to create a buttonthat changes its style when it gets pressed. This is my CSS code:
我想创建一个button在按下时改变其样式的样式。这是我的 CSS 代码：
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}<button>Button</button>It is changed only when I click & hold on it. I want to make it change style after it's pressed. For example, normal state would be white, state while being clicked would be green and after click is released it would be red.
只有当我点击并按住它时它才会改变。我想让它在按下后改变样式。例如，正常状态为白色，点击状态为绿色，释放点击后为红色。
回答by rlemon
You can do this if you use an <a>tag instead of a button. I know it's not exactly what you asked for, but it might give you some other options if you cannot find a solution to this:
如果您使用<a>标签而不是按钮，则可以执行此操作。我知道这并不完全符合您的要求，但是如果您找不到解决方案，它可能会给您一些其他选择：
Borrowing from a demo from another answer here I produced this:
从这里的另一个答案中借用演示，我制作了这个：
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:active {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}<a id="btn" href="#btn">Demo</a>Notice the use of :target; this will be the style applied when the element is targeted via the hash. Which also means your HTML will need to be this: <a id="btn" href="#btn">Demo</a>a link targeting itself. and the demo http://jsfiddle.net/rlemon/Awdq5/4/
注意使用:target; 这将是通过哈希定位元素时应用的样式。这也意味着您的 HTML 需要是这样的：<a id="btn" href="#btn">Demo</a>一个针对自身的链接。和演示http://jsfiddle.net/rlemon/Awdq5/4/
Thanks to @BenjaminGruenbaum here is a betterdemo: http://jsfiddle.net/agzVt/
感谢@BenjaminGruenbaum，这里有一个更好的演示：http: //jsfiddle.net/agzVt/
Also, as a footnote: this should really be done with JavaScript and applying / removing CSS classes from the element. It would be much less convoluted.
另外，作为一个脚注：这真的应该使用 JavaScript 并从元素中应用/删除 CSS 类来完成。会少很多麻烦。
回答by Linus Caldwell
You could use :focuswhich will remain the style as long as the user doesn't click elsewhere.
:focus只要用户不单击其他地方，您就可以使用which 将保持样式。
button:active {
border: 2px solid green;
}
button:focus {
border: 2px solid red;
}
回答by Afzaal Ahmad Zeeshan
Should we include a little JS? Because CSS was not basically created for this job. CSS was just a style sheet to add styles to the HTML, but its pseudo classes can do something that the basic CSS can't do. For example button:activeactive is pseudo.
我们应该包括一点 JS 吗？因为 CSS 基本上不是为这项工作创建的。CSS 只是一个向 HTML 添加样式的样式表，但它的伪类可以做一些基本 CSS 不能做的事情。例如button:activeactive 是伪的。
Reference:
参考：
http://css-tricks.com/pseudo-class-selectors/You can learn more about pseudo here!
http://css-tricks.com/pseudo-class-selectors/你可以在这里了解更多关于伪的信息！
Your code:
您的代码：
The code that you're having the basic but helpfull. And yes :activewill only occur once the click event is triggered.
您拥有基本但有用的代码。并且 yes:active只会在触发点击事件后发生。
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
This is what CSS would do, what rlemon suggested is good, but that would as he suggested would require atag.
这就是 CSS 会做的事情，rlemon 建议的很好，但正如他建议的那样，这需要a标签。
How to use CSS:
如何使用 CSS：
You can use :focustoo. :focuswould work once the click is made and would stay untill you click somewhere else, this was the CSS, you were trying to use CSS, so use :focusto make the buttons change.
你也可以使用:focus。 :focus一旦点击就可以工作，直到你点击其他地方，这就是 CSS，你试图使用 CSS，所以用来:focus改变按钮。
What JS would do:
JS 会做什么：
The JavaScript's jQuery library is going to help us for this code. Here is the example:
JavaScript 的 jQuery 库将帮助我们编写此代码。这是示例：
$('button').click(function () {
$(this).css('border', '1px solid red');
}
This will make sure that the button stays red even if the click gets out. To change the focus type (to change the color of red to other) you can use this:
这将确保即使点击消失，按钮也保持红色。要更改焦点类型（将红色更改为其他颜色），您可以使用：
$('button').click(function () {
$(this).css('border', '1px solid red');
// find any other button with a specific id, and change it back to white like
$('button#red').css('border', '1px solid white');
}
This way, you will create a navigation menu. Which will automatically change the color of the tabs as you click on them. :)
这样，您将创建一个导航菜单。当您单击它们时，这将自动更改选项卡的颜色。:)
Hope you get the answer. Good luck! Cheers.
希望你能得到答案。祝你好运！干杯。
回答by Vinicius Santana
You can do this with php if the button opens a new page.
如果按钮打开一个新页面，您可以使用 php 执行此操作。
For example if the button link to a page named pagename.php as, url: www.website.com/pagename.php the button will stay red as long as you stay on that page.
例如，如果按钮链接到名为 pagename.php 的页面，网址为：www.website.com/pagename.php，只要您停留在该页面上，该按钮就会保持红色。
I exploded the url by '/' an got something like:
我用'/'分解了网址，得到了类似的东西：
url[0] = pagename.php
url[0] = 页面名称.php
<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?>
<html>
<head>
<style>
.btn{
background:white;
}
.btn:hover,
.btn-on{
background:red;
}
</style>
</head>
<body>
<a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a>
</body>
</html>
note: I didn't try this code. It might need adjustments.
注意：我没有尝试这个代码。它可能需要调整。
回答by Rex
Maybe :activeover :focuswith :hoverwill help!
Try
也许:active在:focus与:hover将帮助！尝试
button {
background:lime;
}
button:hover {
background:green;
}
button:focus {
background:gray;
}
button:active {
background:red;
}
Then:
然后：
<button onkeydown="alerted_of_key_pressed()" id="button" title="Test button" href="#button">Demo</button>
Then:
然后：
<!--JAVASCRIPT-->
<script>
function alerted_of_key_pressed() { alert("You pressed a key when hovering over this button.") }
</script>
Sorry about that last one. :) I was just showing you a cool function! Wait... did I just emphasize a code block? This is cool!!!
