Question

有没有简单的方法制作：焦点＆amp; ：active表现为：hover？

通常我会写：

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="CatchAll For Ember" patternSyntax="Wildcard" stopProcessing="true">
                    <match url="*" />
                    <action type="Rewrite" url="index.html" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

但我想写一个单独的：悬停规则和：焦点＆amp; ：active将看起来相同

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

Answer 1

出于某种原因，

:hover，:active和:focus作为三个单独的伪类存在。与这些伪类之一匹配的元素不会自动匹配其他两个（即使它们不相互排斥，即元素可以同时匹配其中的两个或三个）。

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

选择器4＆＃39; :matches()将减轻重复性：

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

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

Answer 2

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

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

使用自定义选择器：

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

a:--enter { ... }

使用：matches（）

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

如何制作：焦点，：主动如下：悬停

2 个答案: