This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。
Hover is a pseudo class and can be used to style state.
悬停是一个伪类，可用于设置状态样式。
The hover state is active when a user’s mouse enters the bounding box of an element and is inactive when the user’s mouse leaves it.
当用户的鼠标进入元素的边界框时，悬停状态处于活动状态，而当用户的鼠标离开该元素时，悬停状态处于无效状态。
In this episode, we’ll look at the :hover pseudo-class on text links and cover some of the other link pseudo classes as well. We’ll also look at some of the downsides of hover and some workarounds for non-mouse users. Finally we’ll create a CSS dropdown menu triggered by hover and enhanced with jQuery for touch devices.
在这一集中，我们将研究文本链接上的:hover伪类，并介绍其他一些链接伪类。 我们还将研究悬停的一些缺点以及非鼠标用户的一些解决方法。 最后，我们将创建一个CSS下拉菜单，该菜单由hover触发，并使用jQuery增强了触摸设备。
Probably the most common use of :hover is to provide visual feedback to users when mousing over links and buttons.
:hover的最常见用法可能是当鼠标悬停在链接和按钮上时向用户提供视觉反馈。
The hover state of a link can be styled in CSS as follows:
链接的悬停状态可以在CSS中设置为以下样式：
a:hover {color: red;}The colon next to the a signifies a pseudo class. We’ll look at a number of them in this video and throughout the rest of the series – and you can check out the :enabled and :disabled pseudo classes in “Episode 5: ID Selector“.
a旁边的冒号表示伪类。 我们将在本视频以及整个系列的其余部分中查看其中的许多内容，并且您可以在“第5集： ID Selector ”中检出:enabled和:disabled伪类。
In this example, just the color is being styled but any properties can be changed, overwritten, or canceled out. You could increase the font-size and rotate the link by 180 degrees if you wanted to – but don’t do that.
在此示例中，仅设置了颜色样式，但是可以更改，覆盖或取消任何属性。 如果愿意，可以增加字体大小并将链接旋转180度，但不要这样做。
There are other pseudo classes that are useful for styling different link states too.
还有其他伪类对于样式化不同的链接状态也很有用。
There’s a:visited for styling links that the user has in their browser history. There’s also a:active for styling a link that is currently being clicked on. Finally, there’s a:focus for a link that currently has keyboard focus – ie. the user has used the tab key to jump through the clickable items on a page like links and form inputs.
有a:visited用于a:visited用户在其浏览器历史记录中的样式链接。 还有a:active用于设计当前单击的链接的样式。 最后，当前链接具有键盘焦点的链接有a:focus焦点-即。 用户已使用tab键在页面上的可点击项(如链接和表单输入)中跳转。
I like to group this set of four link states together as part of a reset stylesheet that will set sensible defaults for an entire project.
我喜欢将这四个链接状态集合在一起，作为重置样式表的一部分，该样式表将为整个项目设置合理的默认值。
a {color: blue;} a:hover {color: lightblue;} a:visited {color: darkblue;} a:focus {outline: 1px dotted grey;} a:active {color: lightblue;}Hover states can be applied to any element – not just links – which makes them very versatile. But on touch devices, there’s no mouse to initiate the hover.
悬停状态可以应用于任何元素-不仅限于链接-这使它们非常通用。 但是在触摸设备上，没有鼠标来启动悬停。
Hover styles sometimes get applied if a user taps very lightly on a link or button but this is not reliable and not consistent across platforms and devices. It can often be very confusing, and our job is to improve user experience, not make it worse!
如果用户在链接或按钮上轻按一下，则有时会应用悬停样式，但这是不可靠的，并且在平台和设备之间不一致。 这通常会非常令人困惑，我们的工作是改善用户体验，而不是使它变得更糟！
In the case of touch devices, avoid key information being hidden behind hover interactions. If this can’t be done, it is possible to swap out hovers for clicks using JavaScript.
对于触摸设备，请避免将关键信息隐藏在悬停交互之后。 如果无法做到这一点，则可以使用JavaScript将悬停交换为点击。
Some users aren’t able to use a mouse and we can improve the experience for them by always applying :focus and :active styles whenever we use :hover. We can comma separate these in our CSS as follows:
有些用户无法使用鼠标，只要使用:hover ，我们就可以始终使用:focus和:active样式来改善他们的使用体验。 我们可以在CSS中用逗号将它们分开，如下所示：
a:hover, a:focus, a:active { /* styles */ }If you use a CSS pre-processor like Sass, you could create a mixin that would output these three comma separated pseudos for you without having to write them out all the time.
如果使用像Sass这样CSS预处理器，则可以创建一个mixin，它将为您输出这三个逗号分隔的伪文件，而不必一直将它们写出来。
@mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } }Now your state based styles will show during keyboard interactions on elements that can be focused or made active.
现在，基于状态的样式将在键盘交互过程中显示在可以集中或激活的元素上。
We’ve seen a basic use of :hover to give some visual feedback when interacting with links and buttons. Another common design pattern on the web is dropdown menus in a site’s main navigation.
我们已经看到:hover的基本用法，以便在与链接和按钮进行交互时提供一些视觉反馈。 Web上另一个常见的设计模式是站点主导航中的下拉菜单。
We can use the hover interaction to show and hide a sub-menu by using more complex CSS selectors. To make this interaction behave nicely on touch devices, a small amount of JavaScript is required to convert hover events into click events – but we’ll take a look at that later.
通过使用更复杂CSS选择器，我们可以使用悬停交互来显示和隐藏子菜单。 为了使这种交互在触摸设备上表现良好，需要少量JavaScript才能将悬停事件转换为点击事件-但我们稍后将进行介绍。
The trick is to toggle the display property of the sub menus when hovering over the top-level menu items. As :hover is a CSS selector, it can be combined with other selectors in a chain to create more complex behaviour. For more info on the display property, check out “Episode 4: Display“.
诀窍是将鼠标悬停在顶级菜单项上时切换子菜单的display属性。 由于:hover是CSS选择器，因此可以与链中的其他选择器结合使用以创建更复杂的行为。 有关display属性的更多信息，请查看“第4集： Display ” 。
In this example, I have a horizontal unordered list of links, each with a sub-menu positioned beneath them. The sub menus are another unordered list but with the list items stacked on top of each other.
在此示例中，我有一个水平的无序链接列表，每个链接都有一个位于其下方的子菜单。 子菜单是另一个无序列表，但列表项彼此堆叠。
This CSS, sets up this initial layout. The colour and font properties have been moved into my page-styles.css file, to keep the working area clean.
此CSS设置此初始布局。 颜色和字体属性已移到我的page-styles.css文件中，以保持工作区清洁。
.menu > li { position: relative; display: inline-block; } .menu .sub-menu { position: absolute; top: 100%; left: 0; }The sub-menus can be hidden with display:none and then set to display:block when a menu item is being hovered over.
子菜单可以使用display:none隐藏，然后将其悬停在菜单项上时设置为display:block 。
.menu li:hover .sub-menu { display: block; }This will show all sub-menus but we can tweak this selector to limit the showing and hide to individual sub-menus by using the > child selector. For more info on this and other combinator selectors, check out the previous episode on the general sibling selector.
这将显示所有子菜单，但是我们可以使用>子选择器来调整此选择器，以限制显示和隐藏到单个子菜单。 有关此组合器选择器和其他组合器选择器的更多信息，请查看常规同级选择器上的上一集。
.menu li:hover > .sub-menu { display: block; }If you prefer less of a sudden snapping on or off of the sub menus, you could combine opacity with transition for more of a fade in, fade out effect. I’ll leave that as an exercise for you to play around with – make a Codepen and shoot me a tweet; I’d love to check out what you come up with.
如果您不希望突然打开或关闭子菜单，则可以将opacity与transition效果结合使用，以获得更多的淡入淡出效果。 我将其作为练习留给您玩-制作Codepen并给我发一条推文； 我很想看看您的想法。
To make this drop down menu play nice on touch devices, we can add in a bit of JavaScript. This jQuery snippet will activate the dropdown menus on click instead of hover; clicking a second time will allow any link in the top-level menu to be navigated to unless it’s an empty link.
为了使该下拉菜单在触摸设备上更好地播放，我们可以添加一些JavaScript。 该jQuery代码段将在单击时激活下拉菜单，而不是将鼠标悬停； 第二次单击将允许导航到顶级菜单中的任何链接，除非它是空链接。
if ('ontouchstart' in document.documentElement) { $('.menu > li').has('.sub-menu').on('click', 'a', function(e) { var $menuItem = $(this); var target = $menuItem.attr('href'); if (!target || target === '#') { return false; } if ($menuItem.is('.js-active')) { return true; } e.preventDefault(); $menuItem.addClass('js-active').siblings().removeClass('js-active'); $('.sub-menu').hide(); $menuItem.find('.sub-menu').show(); }); }A working example of this menu including the jQuery for touch devices can be found on Codepen.
可以在Codepen上找到此菜单的工作示例，其中包括用于触摸设备的jQuery。
Watch out for our Quick Tip article coming soon!
请留意即将发布的“快速提示”文章！
翻译自: https://www.sitepoint.com/atoz-css-screencast-hover-pseudo-class/
