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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16715274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:42:45  来源:igfitidea点击:

What is the mouse down selector in CSS?

htmlcsscss-selectors

提问by multimediaxp

I have noticed that buttons and other elements have a default styling and behave in 3 steps: normal view, hover/focus view and mousedown/click view, in CSS I can change the styling of normal view and hover view like this:

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

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

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

but how can I select the mousedown? I want something like this:

但我怎样才能选择mousedown?我想要这样的东西:

button:mousedown{
  //some styling
}

thanks

谢谢

回答by jansmolders86

I think you mean the active state

我想你是说活跃状态

 button:active{
  //some styling
 }

These are all the possible pseudo states a link can have in CSS:

这些是链接在 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 */

See also: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

另见:http: //www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

回答by shawn98ag

I figured out that this behaves like a mousedown event:

我发现这就像一个 mousedown 事件:

button:active:hover {}

回答by woohooGuy

Pro-tip Note:for some reason, CSS syntax needs the :activesnippet afterthe :hoverfor the same element in order to be effective

专业提示注意:出于某种原因,CSS 语法需要同一元素后面:active代码段才能生效:hover

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

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

回答by Mees

I recently found out that :active:focusdoes the same thing in css as :active:hoverif you need to override a custom css library, they might use both.

我最近发现:active:focus在 css中做同样的事情就像:active:hover你需要覆盖自定义 css 库一样,他们可能会同时使用两者。