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

我注意到按钮和其他元素有一个默认的样式和行为在3个步骤: 普通视图，悬停/聚焦视图和鼠标下降/点击视图，在 CSS 中我可以改变普通视图和悬停视图的样式如下:

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


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

但是我怎样才能选择鼠标呢? 我想要这样的东西:

button:mousedown{
//some styling
}

谢谢

159811 次浏览
小开
最佳答案

我想你说的是活跃状态

 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

小开

注意: 由于某些原因，CSS 语法需要 :active片段 之后和 :hover来处理相同的元素，以便有效

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

小开

我发现这就像是一个鼠标掉落事件:

button:active:hover {}
小开

我最近发现，如果你需要覆盖一个定制的 css 库，:active:focus在 css 中和 :active:hover做同样的事情，他们可能会同时使用这两者。

小开

只是为了参考，同时也为我自己寻找这一点。我做了一个简单漂亮的纽扣从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>

结果是这样的:

不合适 not active button

一拍即合 active button on click


提交答案