我想创建一个 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>
只有当我点击并按住它时它才会改变。我想让它在按下后改变样式。例如,正常状态为白色,点击状态为绿色,释放点击后为红色。
最佳答案
如果您使用 <a>
就可以做到这一点标签而不是按钮。我知道这并不完全符合您的要求,但如果您找不到解决方案,它可能会为您提供一些其他选择:
借用这里另一个答案的演示,我制作了这个:
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>
注意 :target
的使用;这将是通过散列定位元素时应用的样式。这也意味着您的 HTML 需要是这样的:<a id="btn" href="#btn">Demo</a>
以自身为目标的链接。和演示 http://jsfiddle.net/rlemon/Awdq5/4/
感谢@BenjaminGruenbaum 这里有一个更好的演示:http://jsfiddle.net/agzVt/
此外,作为脚注:这实际上应该使用 JavaScript 并从元素中应用/删除 CSS 类来完成。这样就不会那么复杂了。
关于css - 按下的<按钮>选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15463854/