CSS3 :hover 和 :focus 的区别？答案

【问题标题】：Differences between CSS3 :hover and :focus?CSS3 :hover 和 :focus 的区别？
【发布时间】：2011-09-02 21:08:16
【问题描述】：

CSS3 doc 谈论 :hover 和 :focus，我觉得它们完全一样。两者有什么区别？我没看到什么？

谢谢！

【问题讨论】：

【解决方案1】：

hover 仅适用于指点设备位于元素上方时。文档说得很清楚。

【讨论】：

【解决方案2】：

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

【讨论】：

是的，我忘记了单击然后移动鼠标的操作。还有选项卡到字段的可能性。谢谢。
为避免混淆：此处的“光标”表示“插入符号”。 :)
为了完整性：并非所有控件在获得焦点时都有插入点。链接和按钮也可以具有焦点。
您给出的答案使我找到了解决类似问题的解决方案，其中包括“单击并拖走”。使用 a:focus 和 a:hover 是不够的。我必须使用“a:hover:focus”来确保我两者都是真的！
a:hover 和 a:focus 是一回事吗？（因为你不能在 a 元素内）

【解决方案3】：

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

【讨论】：

【解决方案4】：

悬停您可以使用新的 css3 技术添加带有转换时间的 % 百分比。预计 IE9 所有主要浏览器都会支持它们。这是两个导航菜单的一些示例，用于了解悬停和悬停动画以及 css3 悬停属性中颜色的褪色。 `

【讨论】：

【解决方案5】：

:hover 和:focus 的区别在于：

:hover 当您的鼠标指针位于元素上时。

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

【讨论】：

【解决方案6】：

悬停特别是关于鼠标指针：

例如当鼠标指针在 / （在） 按钮，该按钮悬停是真。

焦点在于高亮元素：

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

【讨论】：

【解决方案7】：

两者之间存在“对比差异”：

Hover-当您的鼠标指针悬停（挥动或浮动）在特定元素上时。

和

Focus-当您选择一个元素时，该元素就会成为焦点。

【讨论】：

【解决方案8】：

这两件事（即悬停和焦点）之间的主要区别是：

悬停：- 当您将鼠标指针放在特定元素上时，例如按钮、文本字段等。

焦点：- 当您选择一个元素或单击一个事件时，它会更改其原始状态并看起来不同。

【讨论】：