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
What is the mouse down selector in CSS?
提问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 :active
snippet afterthe :hover
for the same element in order to be effective
专业提示注意:出于某种原因,CSS 语法需要同一元素后面的:active
代码段才能生效:hover
回答by Mees
I recently found out that :active:focus
does the same thing in css as :active:hover
if you need to override a custom css library, they might use both.
我最近发现:active:focus
在 css中做同样的事情就像:active:hover
你需要覆盖自定义 css 库一样,他们可能会同时使用两者。