如果我转到developer.mozilla.org并通过下拉菜单选项卡,我将获得带有大纲的元素,这对于可访问性来说是完全好的:
但是,如果我单击它,我不会得到轮廓:
我曾尝试通过仅使用伪类:focus来实现此目的,但排除了:active仍然无法正常工作>
a {
color: @brand-link;
&:focus:not(:active) {
outline: -webkit-focus-ring-color auto 5px;
}
&:active {
outline: none;
}
}
任何人都只知道如何仅对于选项卡导航而不是单击元素实现轮廓吗?
顺便说一句,我用的更少了。
下面是一个示例,如果您单击它,它将以gold
的颜色将其轮廓概述:
a:focus {
outline: 4px solid gold;
}
a:active {
outline: none;
}
<a href="/">FOO LINK</a>
我希望金色仅在选项卡导航中可见,而在单击元素时不可见
答案 0 :(得分:2)
sample(x$ret, 200, replace=TRUE)
是在点击时触发的伪类。
:active
将准确显示此onclick。 jsfiddle for you to see。
Very informative post on differences between :hover
, :active
, and :focus
。
a:link:active{outline:10px dotted #000;}
代表尚未访问的元素。 reference
编辑:
解决方案是:
:link
答案 1 :(得分:0)
尝试
a {
color: @brand-link;
&:focus {
outline: none;
}
}