通过Tab键区分:focus和CSS中的:focus [英] Differentiate between :focus via tab-key and :focus via click in CSS

问题描述

尽管我非常确定我的问题的答案将是无法完成"，但我想确定并在这里问你们.

Although I am quite certain that the answer to my question will be "Can't be done" I'd like to be sure and ask you guys here.

我有一个非常典型的场景，我想在我的网站上启用Tab键(即使用键盘上的Tab键).用户刚刚选中的项目应通过CSS进行可视标记.到现在为止还挺好.显然，这需要focus-pseudo类:

I have a rather typical scenario in which I want to enable tabbing through my website (i.e. using tab key on keyboard). The item the user has just tabbed upon should be marked visually via CSS. So far, so good. This, obviously, demands the focus-pseudo class:

a {
    color: #000;

    &:hover {
        color: lighten(#000, 10%); // discreet change
    }

    &:focus {
        background-color: green; // extreme change
    }
}

但是我只想在用户浏览页面时才应用此样式.当用户悬停或单击某个元素时，样式应有所不同.

But I want to apply this style solely when the user tabs through the page. When the user hovers or clicks an element the style should be something different.

示例:用户悬停或单击锚点.然后，由于用户已经知道他在哪个元素上进行了交互，因此可以简化视觉辅助.但是当他浏览页面时，他并不能那么确定，因此样式应该更加生动.

Example: A user hovers or clicks an anchor. Then the visual aid can be discreet because the user already knows which element he has interacted upon. But when he tabs through the page he can not be so sure and thus the styling should be more drastic.

我遇到的问题是:元素将焦点样式应用于标签页并单击页面上.

The problem I am having is: An element gets the focus-styles applied on on both tabbing the page and clicking on it.

仅当元素通过制表键聚焦时，才有仅CSS的方式来应用样式吗?

Is there a CSS-only way to apply styles solely when an element got focused via tabbing?

再次，我很确定这是不可能的，但是只是为了确保我已经问过这个问题.

Again, I am pretty sure that this is not possible, but just to be sure I have asked the question.

推荐答案

:focus 伪类不会根据元素最初输入焦点的方式进行区分.因此确实如此，仅CSS不可能做到这一点.至少您需要通过事件处理程序对焦点上的元素进行注释.

The :focus pseudo-class does not discriminate based on how the element entered focus in the first place. So indeed, this is not possible with just CSS. At the very least you'd need to annotate the element on focus via an event handler.

:hover 和:active 伪类在这里没有任何帮助，因为前者仅在鼠标指针位于元素上时才适用，而后者仅在按下鼠标按钮时才适用，即，两种状态都不会像:focus 那样持续存在，因为即使在鼠标指针离开元素后，该元素仍会保持焦点，从而使其与接收到的元素无法区分通过标签聚焦.

The :hover and :active pseudo-classes won't be of any help here since the former only applies when the mouse pointer is on the element and the latter only applies when the mouse button is down, i.e. neither state persists the way :focus does, since an element remains in focus even after the mouse pointer has left the element, making it indistinguishable from an element that received focus via tabbing.

这篇关于通过Tab键区分:focus和CSS中的:focus的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！