css悬停_CSS悬停选择器说明（带有示例）

css悬停

The CSS :hover selector is one of many pseudo-classes that are used to style elements. :hover is used to select elements that users hover their cursor or mouse over. It can be used on all elements, not only on links.

CSS :hover选择器是用于样式元素的许多伪类之一。 :hover用于选择用户将光标悬停在其上的元素。 它不仅可以用于链接，还可以用于所有元素。

When used to style links, :hover is often paired with the :link, :visited, and :active selectors which style unvisited, visited, and active links, respectively.

当用于设置链接样式时， :hover通常与:link ， :visited和:active选择器配对使用，它们分别设置未访问，访问和活动链接的样式。

If :link and :visited rules are in the CSS definition, :hover should fall after them. Otherwise, the styles in the :hover rule won't be applied to the selected element.

如果:link和:visited规则在CSS定义中，则:hover应该放在它们之后。 否则， :hover规则中的样式将不会应用于所选元素。

Syntax:

句法：

a:hover {
  /* CSS declarations */
}

The hover selector only applies the styles provided in the rule when an element enters the hover state. This is typically when a user hovers over the element with their mouse.

悬停选择器仅在元素进入悬停状态时才应用规则中提供的样式。 通常，这是当用户将鼠标悬停在元素上时。

button {
  color: white;
  background-color: green;
}

button:hover {
  background-color: white;
  border: 2px solid green;
  color: green;
}

In the example above, the button’s normal styling is white text on a green button. When a user hovers over the button with their mouse, the rule with the :hover selector will become active and the button’s style will change.

在上面的示例中，按钮的常规样式是绿色按钮上的白色文本。 当用户将鼠标悬停在按钮上时，带有:hover选择器的规则将变为活动状态，并且按钮的样式将更改。

Note that :hover can be problematic on touchscreens – different hardware and mobile browser implementations can cause the pseudo-class to be triggered in some cases and not in others. Make sure to thoroughly test elements with :hover in as many different mobile browsers and devices as possible.

请注意:hover在触摸屏上可能会出现问题-不同的硬件和移动浏览器实现可能在某些情况下而不是在其他情况下触发伪类。 确保使用:hover在尽可能多的不同移动浏览器和设备中彻底​​测试元素。

翻译自: https://www.freecodecamp.org/news/hover-selector/

css悬停