AtoZ CSS 截屏视频：悬停伪类
HTML 和 CSS AtoZ CSS 截屏视频：悬停伪类 CSS 盖·劳特利奇 盖·劳特利奇 2016 年 9 月 21 日 分享 Pause Next Unmute Current Time 0:10 / Duration 2:00 Fullscreen 该截屏视频是我们 AtoZ CSS 系列的一部分。您可以在此处找到该系列的其他条目。 成绩单 Learn to Code with JavaScript Hover 是一个伪类，可用于设置状态样式。 当用户的鼠标进入元素的边界框时，悬停状态处于活动状态；当用户的鼠标离开元素的边界框时，悬停状态处于非活动状态。 在本集中，我们将研究:hover文本链接上的伪类，并介绍一些其他链接伪类。我们还将了解悬停的一些缺点以及针对非鼠标用户的一些解决方法。最后，我们将为触摸设备创建一个由hoverjQuery 触发并增强的 CSS 下拉菜单。 链接 最常见的用途可能:hover是当用户将鼠标悬停在链接和按钮上时向用户提供视觉反馈。 链接的悬停状态可以在 CSS 中设置样式，如下所示 旁边的冒号a表示伪类。我们将在本视频以及本系列的其余部分中介绍其中的一些内容 - 您可以在“第 5 集：”中查看:enabled和:disabled伪类。ID Selector 在此示例中，仅设置了颜色样式，但可以更改、覆盖或取消任何属性。如果您愿意，您可以增加字体大小并将链接旋转 180 度 - 但不要这样做。 还有其 华侨资料 他伪类也可用于设置不同链接状态的样式。 Learn to Code with JavaScript a:visited用户的浏览器历史记录中有用于样式链接的内容。还有a:active用于设置当前正在单击的链接的样式。最后，有a:focus一个当前具有键盘焦点的链接 - 即。用户使用该tab键跳转页面上的可点击项目，例如链接和表单输入。 我喜欢将这组四个链接状态组合在一起，作为重置样式表的一部分，该样式表将为整个项目设置合理的默认值。不足之处 悬停状态可以应用于任何元素，而不仅仅是链接，这使得它们非常通用。但在触摸设备上，没有鼠标来启动悬停。
https://manchestermassage.net/wp-content/uploads/2024/02/%E5%8D%8E%E4%BE%A8%E8%B5%84%E6%96%99.png
如果用户轻轻点击链接或按钮，有时会应用悬停样式，但这在平台和设备上并不可靠且不一致。它通常会非常令人困惑，我们的工作是改善用户体验，而不是让情况变得更糟！ 对于触摸设备，请避免将关键信息隐藏在悬停交互后面。如果无法做到这一点，可以使用 JavaScript 将悬停替换为点击。 有些用户无法使用鼠标，我们可以通过在使用时始终应用:focus和样式来改善他们的体验。我们可以在 CSS 中用逗号分隔它们，如下所示 如果您使用像 Sass 这样的 CSS 预处理器，您可以创建一个 mixin 来为您输出这三个逗号分隔的伪值，而不必一直将它们写出来。} 现在，基于状态的样式将在键盘交互期间显示在可以聚焦或激活的元素上。 CSS 下拉菜单 :hover我们已经看到了在与链接和按钮交互时提供一些视觉反馈的基本用法。网络上另一个常见的设计模式是网站主导航中的下拉菜单。 我们可以通过使用更复杂的 CSS 选择器，使用悬停交互来显示和隐藏子菜单。
页:
[1]