核心要点 :hover伪类是鼠标悬停在链接和按钮上时，提供视觉反馈的实用工具。它可以通过多种方式进行样式设置，例如更改元素的颜色、大小或方向。但是，它在触摸设备上的可靠性并不一致，不应将其用于隐藏关键信息。 其他伪类可用于设置不同链接状态的样式，例如:visited用于用户浏览器历史记录中的链接，:active用于正在点击的链接，以及:focus用于当前处于键盘焦点的链接。这些可以组合在一个重置样式表中，为项目设置默认值。 :hover伪类还可用于创建网站主导航中的下拉菜单。这涉及到在悬停在顶级菜单项上时切换子菜单的display属性。为了使这种交互在触摸设备上良好运行，可以使用JavaScript将悬停事件转换为点击事件。 视频讲解概要 本视频将探讨:hover伪类在文本链接中的应用，并介绍其他一些链接伪类。此外，还将探讨:hover的一些缺点以及针对非鼠标用户的解决方法。最后，我们将创建一个由:hover触发的CSS下拉菜单，并使用jQuery增强触摸设备的兼容性。 链接样式 :hover最常见的用途可能是为用户在鼠标悬停在链接和按钮上时提供视觉反馈。 链接的:hover状态可以用CSS如下设置样式： a:hover { color: red; }登录后复制登录后复制登录后复制 冒号后面的a表示伪类。在本视频和本系列的其余部分中，我们将介绍许多伪类——您可以在“第5集：ID选择器”中查看:enabled和:disabled伪类。 在此示例中，仅设置了颜色样式，但可以更改、覆盖或取消任何属性。如果需要，可以增加字体大小并将链接旋转180度——但这不建议这么做。 还有一些其他伪类可用于设置不同链接状态的样式。 :visited用于设置用户浏览器历史记录中链接的样式。:active用于设置当前正在点击的链接的样式。:focus用于设置当前具有键盘焦点的链接的样式——即，用户使用Tab键跳转到页面上的可点击项目（如链接和表单输入）。 我喜欢将这四种链接状态组合在一起，作为重置样式表的一部分，为整个项目设置合理的默认值。 a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; }登录后复制登录后复制登录后复制 缺点 :hover状态可以应用于任何元素，而不仅仅是链接，这使得它们非常通用。但在触摸设备上，没有鼠标来启动:hover。如果用户轻触链接或按钮，:hover样式有时会应用，但这不可靠且在不同平台和设备上不一致。这通常会非常令人困惑，而我们的工作是改善用户体验，而不是使其更糟！ 对于触摸设备，请避免将关键信息隐藏在:hover交互后面。如果无法做到这一点，可以使用JavaScript将:hover替换为点击事件。 有些用户无法使用鼠标，我们可以通过在使用:hover时始终应用:focus和:active样式来改善他们的体验。我们可以在CSS中用逗号分隔它们，如下所示： a:hover { color: red; }登录后复制登录后复制登录后复制 如果使用Sass之类的CSS预处理器，可以创建一个mixin，它将输出这三个用逗号分隔的伪类，而无需每次都写出来。 a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; }登录后复制登录后复制登录后复制 现在，基于状态的样式将在可聚焦或可激活元素的键盘交互期间显示。 CSS下拉菜单 我们已经看到了:hover的基本用法，以便在与链接和按钮交互时提供一些视觉反馈。Web上的另一个常见设计模式是网站主导航中的下拉菜单。 我们可以使用:hover交互通过使用更复杂的CSS选择器来显示和隐藏子菜单。为了使这种交互在触摸设备上表现良好，需要少量JavaScript将:hover事件转换为点击事件——但我们稍后会介绍。 诀窍是在悬停在顶级菜单项上时切换子菜单的display属性。由于:hover是CSS选择器，因此可以将其与其他选择器组合在一起，以创建更复杂的行为。有关display属性的更多信息，请查看“第4集：显示”。 在此示例中，我有一个水平无序链接列表，每个链接下面都有一个子菜单。子菜单是另一个无序列表，但列表项彼此堆叠在一起。 此CSS设置了此初始布局。颜色和字体属性已移至我的page-styles.css文件中，以保持工作区域整洁。 a:hover, a:focus, a:active { /* styles */ }登录后复制登录后复制 可以使用display: none隐藏子菜单，然后在悬停在菜单项上时将其设置为display: block。 @mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } }登录后复制登录后复制 这将显示所有子菜单，但我们可以调整此选择器以通过使用>子选择器来限制单个子菜单的显示和隐藏。有关此信息和其他组合选择器的更多信息，请查看上一集关于通用同级选择器的介绍。 .menu > li { position: relative; display: inline-block; } .menu .sub-menu { position: absolute; top: 100%; left: 0; }登录后复制 如果您更喜欢子菜单不那么突然地显示或隐藏，可以将opacity与transition组合起来，以实现更渐进的淡入淡出效果。我将把它留作练习，让您自己尝试——创建一个CodePen并给我发条推文；我很乐意查看您的作品。为了使此下拉菜单在触摸设备上正常工作，我们可以添加一些JavaScript。此jQuery代码段将在点击而不是悬停时激活下拉菜单；再次点击将允许导航到顶级菜单中的任何链接，除非它是空链接。 a:hover { color: red; }登录后复制登录后复制登录后复制 包含触摸设备jQuery的此菜单的工作示例可以在CodePen上找到。 常见问题解答 :hover、:focus和:active伪类在CSS中的区别是什么？ :hover、:focus和:active都是CSS中的伪类，它们应用于不同的用户交互。:hover伪类在用户将光标悬停在元素上而无需激活它时触发。:focus伪类在元素获得焦点时应用，通常是通过用户点击输入元素或使用键盘导航到它来实现的。:active伪类在用户激活元素（例如点击链接或按钮）时立即应用。 如何对不同的元素使用:hover伪类？ :hover伪类可以与任何HTML元素一起使用，而不仅仅是链接。它可以用来更改用户将鼠标悬停在其上的按钮、表单字段、图像和其他元素的外观。例如，您可以通过使用以下CSS来更改用户将鼠标悬停在其上的按钮的背景颜色： a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; }登录后复制登录后复制登录后复制 可以将多个伪类组合在一起吗？ 是的，您可以将多个伪类链接在一起以创建更具体的选择器。例如，您可以将:hover和:focus伪类组合在一起，以在将鼠标悬停在链接上或链接具有焦点时更改其外观： a:hover, a:focus, a:active { /* styles */ }登录后复制登录后复制 :hover伪类如何与触摸设备一起使用？ 在触摸设备上，没有悬停的概念，因为没有光标。但是，一些触摸设备会在用户触摸元素时触发:hover伪类。如果您不小心，这可能会导致意外行为，因此在设计:hover效果时务必考虑触摸设备。 可以将:hover伪类与CSS动画一起使用吗？ 是的，您可以使用:hover伪类来触发CSS动画。这可以用来在用户将鼠标悬停在元素上时创建有趣的视觉效果。例如，您可以使用:hover伪类来设置链接的颜色动画： @mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } }登录后复制登录后复制 在此示例中，当用户将鼠标悬停在其上时，链接的颜色将从蓝色平滑过渡到红色。 This revised output provides a more comprehensive and paraphrased version of the input, maintaining the original meaning and image positions. The language is more natural and engaging for a reader.
