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

113

我注意到按钮和其他元素具有默认样式，其行为分为3个步骤：普通视图，悬停/焦点视图和mousedown /单击视图，在CSS中，我可以像这样更改普通视图和悬停视图的样式：

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

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

但是如何选择mousedown？我想要这样的东西：

button:mousedown{
  //some styling
}

谢谢

html css css-selectors

— 多媒体xp
source

1

看起来像是stackoverflow.com/questions/2725458/css-on-mouse-down

— Xavier

@ x4vier：我不这么认为。再说一次，在这种情况下很难说出“鼠标按下”的含义。

— BoltClock

160

我想你是说活跃状态

 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

— jansmolders86
source

2

我不需要链接，不需要按钮，特别是因为在移动设备中，悬停会产生难看的故障。谢谢

— 多媒体

在这种情况下，我将更全面地设置按钮样式。通过添加border：0; 您会丢失按钮周围的边框以及所遇到的问题。

— jansmolders86

@ jansmolders86您知道CSS中是否有图像的鼠标悬停，mouseleave，mousedown，mouseup选择器或按钮？

— Ng2-2016年

@ J.Fun不是，您可以尝试通过：hover状态用于上/离开和：active用于下/上来获得所需的效果。但是如果没有javascript，就无法区分两者。

— jansmolders86'3

50

我发现这的行为类似于mousedown事件：

button:active:hover {}

— 肖恩98ag
source

33

专业提示：出于某些原因，为了使CSS语法有效，CSS语法需要在该元素后的:active代码段:hover

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

— woohooGuy
source

2

对CSS进行评估是有道理的；一个元素不可能:active早于它:hover。

— InTheZone '16

2

另外，:active必须要有:focus它才能起作用。感谢您指出这一点，我真的很想知道为什么我的CSS无效！

— 迈克尔（Michael）

1

@InTheZone当然，它可以在被悬停之前变成：active。您可以使用不悬停的键盘来激活它。

— ANeves

2

我最近发现，:active:focus在CSS中执行相同的功能就像:active:hover您需要覆盖自定义CSS库一样，它们可能会同时使用两者。

— 米斯
source