CSS转换不在活动链接中工作

重要的是要注意,CSS 2.1规范或Selectors Level 3模块都不会说明状态是否:active也适用于元素的父级:

CSS没有定义哪些元素可能处于上述状态,或者如何输入和保留状态.脚本可以改变元素是否对用户事件做出反应,并且不同的设备和UA可以具有指向或激活元素的不同方式.CSS 2.1没有定义':active'或':hover'元素的父元素是否也处于该状态.

- CSS 2.1规范,第5.11.3节

可能存在文档语言或实现特定限制,哪些元素可以变为:活动或获取:焦点... 选择器不定义元素的父级是否为":active"或":hover"是否也处于该状态.

- 选择器级别3,第6.6.1.2节

考虑到上述情况,我们并不期望所有浏览器不仅将:active伪类应用于当前正在激活的锚元素,而且还应用于锚的父元素.不幸的是,在这种情况下,Chrome和Firefox似乎冒泡了伪类,而Internet Explorer却没有.

虽然这不是规范实现中的错误,但我将为我们的团队打开一个Interop Bug(这些对我们来说是重要的问题).与此同时,您可以通过一些脚本创建您正在寻找的功能.我将在下面使用jQuery:

(function ($) {

    "use strict";

    $("#nav-bar").on({
        "mousedown mouseup": function () { $(this).toggleClass("pressed"); },
        /* mouseleave just incase "mouseup" happens outside of the anchor */
        "mouseleave": function () { $(this).removeClass("pressed"); }
    }, "li");

}(jQuery));

#nav-bar li:not(.active-page):active, 
#nav-bar li:not(.active-page).pressed {
    transform: translate(10px, 10px);
}

    

        
One
        
Two
        
Three
    

#nav-bar li:not(.active-page):active {
    transform: translate(10px, 10px);
}

transform: translate( 10px, 10px );

.button:active {
    transform: perspective(300px) translateZ(-1em);
}

(function ($) {

    "use strict";

    $("#nav-bar").on({
        "mousedown mouseup": function () { $(this).toggleClass("pressed"); },
        /* mouseleave just incase "mouseup" happens outside of the anchor */
        "mouseleave": function () { $(this).removeClass("pressed"); }
    }, "li");

}(jQuery));

#nav-bar li:not(.active-page):active, 
#nav-bar li:not(.active-page).pressed {
    transform: translate(10px, 10px);
}

    

        
One
        
Two
        
Three
    

#nav-bar li:not(.active-page):active {
    transform: translate(10px, 10px);
}

transform: translate( 10px, 10px );

.button:active {
    transform: perspective(300px) translateZ(-1em);
}