CSS CSS3 :hover 和 :focus 之间的区别?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6143782/
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-30 00:38:06  来源:igfitidea点击:

Differences between CSS3 :hover and :focus?

cssfocushovercss-selectorspseudo-class

提问by Pete Wilson

The CSS3 doctalks about :hover and :focus, which seem exactly the same to me. What are the differences between the two? What am I not seeing?

CSS3 DOC悬停和:关于会谈的焦点,这似乎完全一样的我。两者之间有什么区别?我没有看到什么?

Thanks!

谢谢!

回答by Marc B

Hover is 'true' when the mouse pointer is over an element. Focus is true if the cursor is in that element. It's possible for hover to be false and focus true (e.g click in a text field then move the mouse away)

当鼠标指针悬停在元素上时,Hover 为“真”。如果光标位于该元素中,则焦点为真。悬停可能为假而焦点为真(例如,单击文本字段然后将鼠标移开)

回答by recursive

:hoverapplies to any element that the mouse cursor is currently over. :focusrefers to form focus, and is the current form element with focus. Roughly speaking, if you start typing, which element will you be filling?

:hover适用于鼠标光标当前所在的任何元素。 :focus指表单焦点,是当前具有焦点的表单元素。粗略地说,如果你开始打字,你会填写哪个元素?

回答by Vishal Nagda

The different between :hoverand :focusis:

:hover和之间的区别:focus是:

:hoverwhen your mouse pointer is on the element.

:hover当鼠标指针在元素上时。

:focuswhen you select an element, the element gets into the focus.

:focus当您选择一个元素时,该元素会进入焦点。

More Information: CSS Pseudo Classes at W3Schools

更多信息:W3Schools 的 CSS 伪类

回答by spender

hover only applies when the pointing device is over the element. The doc makes that quite clear.

悬停仅适用于指点设备在元素上的情况。文档说得很清楚。

回答by chumego

Hover you can add with % percentages with transition timing with the new css3 technology. Expect IE9 all major browsers will support them. here are some samples of two navigation menus to understand hover and animation on hover and also the fading of the colors in css3 hover attribute. `

悬停您可以使用新的 css3 技术添加百分比与过渡时间。预计 IE9 将支持所有主要浏览器。这里有两个导航菜单的一些示例,以了解悬停和悬停动画以及 css3 悬停属性中颜色的褪色。`

回答by Mauro

You should apply the same formatting to focus and hover, that way the users will have the same UI experience.

您应该对焦点和悬停应用相同的格式,这样用户将拥有相同的 UI 体验。

回答by siluveru kiran kumar

Hover is particularly about Mouse Pointer:

悬停特别是关于鼠标指针

Example when Mouser pointer is over/ (on the)Button, for that button hoveris true.

例如,当鼠标指针悬停在/ (在)Button 上时该按钮悬停true

Focus is about the highlightingelement:

焦点是关于突出显示的元素:

Usually when we use tab key to change the focus of an element.

通常当我们使用tab键来改变一个元素的焦点时。