CSS中的鼠标按下选择器是什么？

Question

我注意到按钮和其他元素具有默认样式，并分 3 个步骤进行操作：普通视图、悬停/焦点视图和鼠标按下/单击视图，在 CSS 中我可以更改普通视图和悬停视图的样式，如下所示：

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

但是我怎样才能选择鼠标按下呢？我想要这样的东西：

button:mousedown{
  //some styling
}

谢谢

Answer 1

我认为你的意思是活动状态

button:active{
  //some styling
}

这些是 CSS 中链接可能具有的所有可能的伪状态：

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

另请参阅：http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

Answer 2

我发现这行为就像鼠标按下事件：

button:active:hover {}

Answer 3

专业提示注意：出于某种原因，CSS 语法需要在同一元素的

:active

之后:hover代码片段才能生效

http://www.w3schools.com/cssref/sel_active.asp

Answer 4

:active:focus

在 css 中与

:active:hover

做同样的事情，如果你需要覆盖自定义 css 库，它们可能会同时使用两者。

Answer 5

CSS：

#button {
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    border-top: 1px solid white;
    border-left: 1px solid white;
    padding: 5px 30px;
    background-color: gainsboro;
}

#button:active {
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}

HTML：

<button id="button">Click Here!</button>

这是结果：

未点击

点击