代码之家 › 专栏 › 技术社区 › Rina_Gorsha

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

pseudo-class css-selectors css

13

Rina_Gorsha · 技术社区 · 10 年前

有没有什么简单的方法使:聚焦和:活动行为为:悬停?

通常我会写:

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

但我只想写一个:悬停规则和:focus&:活动的将看起来相同

.class a:hover {...}

2 回复 | 直到 10 年前

1

9

Linmic 3 年前

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

但是,您可能希望使用 cssnext 使用 @custom-selectors 和 :matches() 今天的语法。

具有 @自定义选择器 :

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

a:--enter { ... }

具有 :is() (是 :matches ,现已重命名为 :is() :

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

2

4

BoltClock 10 年前

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

不可能通过CSS或编程方式强制元素与动态伪类匹配。如果要将样式应用于所有三种状态的元素,则必须指定它们。

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

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

但目前还没有在任何地方实现它。