仅在选项卡上显示元素轮廓,而在单击时不显示

时间:2019-05-17 13:06:26

标签: javascript html css less

如果我转到developer.mozilla.org并通过下拉菜单选项卡,我将获得带有大纲的元素,这对于可访问性来说是完全好的:

enter image description here

但是,如果我单击它,我不会得到轮廓:

enter image description here

我曾尝试通过仅使用伪类: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>

我希望金色仅在选项卡导航中可见,而在单击元素时不可见

2 个答案:

答案 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;
  }

}