需要一个CSS修复标签吗

我正在编写一些需要特定可访问性功能的代码。我创建了一个js提琴作为参考来说明我的问题

我有一个超棒的字体图标，可以触发一个纯CSS弹出框。当您按tab键指向链图标时，它将进入焦点（用蓝色边框勾勒），弹出框将自动打开。然而，我遇到的问题是，我希望下一个选项卡是popover中的第一个链接。目前popover已关闭，链接将隐藏

如果您只需使用鼠标单击链图标和选项卡，该选项卡将带您进入下一个链接。我想知道是否有可能使用某种CSS技巧，只使用从链式图标到popover中第一个链接的标签对标签，而不用触摸鼠标或点击任何其他键

代码如下：

.popover包装器ul{
列表样式：无；
填充：0；
保证金：0；
}
popover先生{
填充：0.2rem 0 0.2rem 0；
}
.popover包装器ul a：悬停，
.popover包装器ul a：聚焦{
颜色：$c-蓝色-深色；
文字装饰：无；
}
波波包装纸{
字体大小：粗体；
}
.爆米花包装{
背景：$c-white；
显示：无；
位置：绝对位置；
填充：1rem；
底部：4rem；
右：-1rem；
宽度：16雷姆；
边框：1px实心$c-gray-2；
过渡：所有.25秒轻松进出；
}
.popover包装器：焦点，
.chainlink:focus+.popover包装器：悬停，
.chainlink+.popover包装器：悬停，
.chainlink:hover+.popover包装器，
.chainlink:focus+.popover包装器{
显示：块；
}
.爆米花包装：之后，
.popover包装器：以前{
内容：''；
左：12.7雷姆；
位置：绝对位置；
}
/*第二个三角形（边框）的样式*/
.popover包装器：以前{
左边框：2.2rem实心透明；
右边框：2.2rem实心透明；
边框顶部：2.2rem实心；
边框顶部颜色：继承；
/*不能包含在工作速记中*/
底部：-2.2rem；
左边距：-2.2rem；
}
.爆米花包装纸：之后{
左边框：2.1rem实心透明；
右边框：2.1rem实心透明；
边框顶部：2.1米纯白；
底部：-2.1rem；
左边距：-2.1rem；
}

链接应用程序

问题在于，一旦您从

chainlink

上取下标签，它就会松开

：悬停

，弹出窗口会退回到默认的

显示：无

样式。您可以使用一个简单的js来解决这个问题，如下例所示。我还向每个链接添加了

tabindex=“0”

，使它们按照

chainlink

的顺序排列

更新

向代码段中添加了以下控件：

• 键入ESC以隐藏弹出窗口
• 当标签切换时，如果链或单个链接都未聚焦（例如，

  activeElement

  ），则弹出窗口隐藏
• 在弹出窗口外单击以隐藏它

var chain=document.getElementById（'chainlink'）；
var popover=document.getElementById（'popover'）；
var links=document.body.querySelectorAll（“.popover link”）
chainlink.onfocus=函数（事件）{
popover.style.display='block'；
}
window.onkeyup=函数（e）{
var key=e.keyCode？e.keyCode:e.which；
如果（键==27）{
popover.style.display='none'；
}
否则如果（键==9）{
让shouldClose=真；
对于（i=0；i

.chainlink{
位置：绝对位置；
右：40px；
顶部：40px；
右边距：100px；
}
.下游{
边缘顶部：100px；
}
popover包装纸{
列表样式：无；
填充：0；
保证金：0；
}
popover先生{
填充：0.2rem 0 0.2rem 0；
}
.popover包装器ul a：悬停，
.popover包装器ul a：聚焦{
颜色：蓝色；
文字装饰：无；
}
波波包装纸{
字体大小：粗体；
}
.爆米花包装{
背景：白色；
显示：无；
位置：绝对位置；
填充：1rem；
底部：4rem；
右：-1rem；
宽度：16雷姆；
边框：1px纯色灰色；
过渡：所有.25秒轻松进出；
}
.爆米花包装：之后，
.popover包装器：以前{
内容：''；
左：12.7雷姆；
位置：绝对位置；
}
/*第二个三角形（边框）的样式*/
.popover包装器：以前{
左边框：2.2rem实心透明；
右边框：2.2rem实心透明；
边框顶部：2.2rem实心；
边框顶部颜色：继承；
/*不能包含在工作速记中*/
底部：-2.2rem；
左边距：-2.2rem；
}
.爆米花包装纸：之后{
左边框：2.1rem实心透明；
右边框：2.1rem实心透明；
边框顶部：2.1米纯白；
底部：-2.1rem；
左边距：-2.1rem；
}

链接应用程序






下游选项卡顺序

问题在于，一旦您从

链接链接

中移出选项卡，它将松开

：悬停

，弹出窗口将返回其默认的

显示：无

样式。您可以使用一个简单的js来解决这个问题，如下例所示。我还向每个链接添加了

tabindex=“0”

，使它们按照

chainlink

的顺序排列

更新

向代码段中添加了以下控件：

• 键入ESC以隐藏弹出窗口
• 当标签切换时，如果链或单个链接都未聚焦（例如，

  activeElement

  ），则弹出窗口隐藏
• 在弹出窗口外单击以隐藏它

var chain=document.getElementById（'chainlink'）；
var popover=document.getElementById（'popover'）；
var links=document.body.que