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

【问题标题】：What is the mouse down selector in CSS?CSS中的鼠标向下选择器是什么？
【发布时间】：2013-05-18 21:25:05
【问题描述】：

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

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

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

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

button:mousedown{
  //some styling
}

谢谢

【问题讨论】：

看起来像 stackoverflow.com/questions/2725458/css-on-mouse-down 的副本
@x4vier：我不这么认为。再说一次，在这种情况下，很难说出“鼠标按下”是什么意思。

标签： html css css-selectors

【解决方案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

【讨论】：

我不需要链接，我需要按钮，特别是因为在移动设备中悬停会产生丑陋的故障。谢谢
添加在这种情况下，我会更完整地设置按钮的样式。通过添加边框：0；您丢失了按钮周围的挡板和您遇到的问题。
@jansmolders86 你知道css中的图片或按钮是否有mouseover、mouseleave、mousedown、mouseup选择器吗？
@J.Fun 不是真的，您可以尝试通过使用 :hover 状态为 over/leave 和 :active 为 down/up 来获得所需的效果。但是如果没有 javascript，你就无法区分这两者。

【解决方案2】：

专业提示： 出于某种原因，CSS 语法需要 :active sn-p after :hover 用于相同的元素才能有效

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

【讨论】：

CSS 是按顺序评估的，所以这是有道理的；一个元素在成为:hover之前不能成为:active。
另外，:active 必须在 :focus 之后才能工作。感谢您指出这一点，我真的很想知道为什么我的 CSS 没有效果！
@InTheZone 当然，它可以在 :hover'ed 之前变为 :active。您可以使用不会悬停的键盘来激活它。

【解决方案3】：

我发现这类似于 mousedown 事件：

button:active:hover {}

【讨论】：

这正是我想要的。在我尝试过的每台设备上，这种组合的行为就像鼠标按下选择器一样。谢谢你。我相信这是正确的答案。

【解决方案4】：

我最近发现 :active:focus 在 css 中的作用与 :active:hover 相同，如果您需要覆盖自定义 css 库，它们可能会同时使用两者。

【讨论】：

【解决方案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>

结果如下：

未点击

点击

【讨论】：