Html 如何在 CSS 中设置单击按钮的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44263892/
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
How to style a clicked button in CSS
提问by user7945230
回答by Rachel Gallen
This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a>tags))
此按钮最初将显示为黄色。悬停时它会变成橙色。当你点击它时，它会变成红色。我使用 :hover 和 :focus 来适应风格。（ :active 选择器通常用于链接（即<a>标签））
button{
background-color:yellow;
}
button:hover{background-color:orange;}
button:focus{background-color:red;}
a {
color: orange;
}
a.button{
color:green;
text-decoration: none;
}
a:visited {
color: purple;
}
a:active {
color: blue;
}<button>
Hover and Click!
</button>
<br><br>
<a href="#">Hello</a><br><br>
<a class="button" href="#">Bye</a>回答by Alexandros Panagiotakis
If you just want the button to have different styling while the mouse is pressed you can use the :activepseudo class.
如果您只想在按下鼠标时按钮具有不同的样式，您可以使用:active伪类。
.button:active {
}
If on the other hand you want the style to stay after clicking you will have to use javascript.
另一方面，如果您希望在单击后保留样式，则必须使用 javascript。
回答by Nadir Laskar
There are three states of button
按钮有三种状态
- Normal : You can select like this
button - Hover : You can select like this
button:hover - Pressed/Clicked : You can select like this
button:active
- 正常：您可以这样选择
button - 悬停：您可以这样选择
button:hover - 按下/点击：您可以这样选择
button:active
Normal:
普通的：
.button
{
//your css
}
Active
积极的
.button:active
{
//your css
}
Hover
徘徊
.button:hover
{
//your css
}
SNIPPET:
片段：
Use :activeto style the active state of button.
用于:active设置按钮的活动状态样式。
button:active{
background-color:red;
}<button>Click Me</button>回答by Chesswithsean
Unfortunately, there is no :click pseudo selector. If you want to change styling on click, you should use Jquery/Javascript. It certainly is better than the "hack" for pure HTML / CSS. But if you insist...
不幸的是，没有 :click 伪选择器。如果您想在单击时更改样式，则应使用 Jquery/Javascript。它当然比纯 HTML/CSS 的“hack”更好。但是如果你坚持...
input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
background: #444;
color: #fff;
} <label for="input">
<input id="input" type="radio" />
<span>NO JS styling</span>
</label>Or, if you prefer, you can toggle the styling:
或者，如果您愿意，可以切换样式：
input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
background: #444;
color: #fff;
} <label for="input">
<input id="input" type="checkbox" />
<span>NO JS styling</span>
</label>回答by priyank bhardwaj
button:hover is just when you move the cursor over the button.
Try button:activeinstead...will work for other elements as well
button:hover 只是当您将光标移到按钮上时。
尝试button:active代替...也适用于其他元素
button:active{
color: red;
}