html - CSS中的鼠标向下选择器是什么？

Question

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

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

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

但我怎样才能选择mousedown？我想要这样的东西：

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

我发现这就像 mousedown 事件：

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

仅供参考，同时也为自己寻找。我从 90 年代开始制作了一个简单漂亮的按钮。在单击时，只需简单地更改边框颜色，它看起来就像按下了一样。

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>

结果如下：

未点击

点击