如何使 :focus, :active 与 :hover 相同

Question

有什么简单的方法可以让 :focus 和 :active 表现得像 :hover 吗？

通常我写：

.class a:hover, .class a:active, .class a:focus {...}

但我只想写一个 :hover 规则，而 :focus 和 :active 看起来是一样的

.class a:hover {...}

Answer 1

:hover、:active 和 :focus 作为三个独立的伪 class 存在是有原因的。匹配这些伪 classes 之一的元素不会自动匹配其他两个（即使它们不是互斥的，即一个元素可以同时匹配其中的两个或三个） .

无法通过 CSS 或编程方式强制元素匹配动态伪 class。如果要将样式应用于所有这三种状态的元素，则必须指定它们。

选择器 4 的 :matches() 将减轻重复性：

.class a:matches(:hover, :active, :focus)

但它目前还没有在任何地方实施无前缀。

Answer 2

CSS2/3目前没有更好的方法。

但是，您今天可能想使用 cssnext to use the @custom-selectors and :matches() 语法。

与@custom-selectors:

@custom-selector: --enter :hover, :focus, :active;

a:--enter { ... }

与:matches():

a:matches(:hover, :focus, :active) { ... }