Jquery 在CSS大纲上添加焦点和覆盖会导致大纲消失

我有一个包含引导转盘的引导模式。我需要旋转木马中处于活动状态的幻灯片才能对焦。我试图覆盖轮廓样式，以使焦点更可见，尤其是在边缘。我可以成功聚焦代码笔仅在第一张幻灯片上进行演示，如果我不覆盖轮廓，则可以在图像上看到默认浏览器轮廓。然而，当我试图覆盖轮廓时，它完全消失了

代码笔：

HTML

复制步骤：

导航到codepen。 按下按钮以打开模式。 请注意，没有描述焦点的大纲。 打开CSS编辑器。 向下滚动到末尾，删除或注释掉大纲覆盖。 拯救 按下按钮打开模式。 请注意，图像具有描述焦点的轮廓。

---

如何成功覆盖大纲？

从我所看到的情况来看，如果您针对的是.active项目，我不确定您是否需要：焦点。还有溢出：隐藏确实是隐藏了轮廓

请尝试以下方法：

.carousel-inner .item.active {
  border: #00bfff solid 5px;
}

---

在遇到另一个堆栈后，我能够修复此问题。这是极难找到的！

我选择的解决方案是该页面上两个建议的组合：

.carousel-inner .item.active:focus
{
    outline: 2px solid #00bfff;
    outline-offset: -2px;
}

/* FIX FOR EDGE: When Edge impliments outline-offset will want to delete 
this block. But until then this is the best method
to allow a noticeable outline for accessibility
*/
.carousel-inner .item.active:focus::after
{
    content: "";
    height: 99.19%;
    outline: 2px solid #00bfff;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 99.19%;
    z-index: 99999;
}

我还使用此解决方案更新了代码笔：

---

您好，您希望活动幻灯片“聚焦”是什么意思？你希望它有一个轮廓还是另一个效果？是的，两个焦点，我希望轮廓更粗。我发现隐藏在旋转木马内部的溢出隐藏了轮廓。我应该能够将其更改为溢出：可见，没有任何问题。然而，仍然有一个谜，为什么浏览器会显示它的标准轮廓，但当我试图覆盖它时，它就会消失。实际上溢出：可见会破坏我在实际项目中的布局，所以我无法使用它嘿，劳拉，谢谢你看这个。我之所以需要使用大纲，是因为它不影响布局。如果您注意到当边框被折叠时，内容会在卡片内部收缩。此外，还有一个关于可访问性的问题。当读者在内容上时，就会有一个双层厚边框，一个是外部的读者，另一个是内部的内容。我给了你一个向上的投票，因为在正确的情况下，这是一个很好的解决方案。啊，是的，我明白了，这是有道理的。谢谢，很高兴您找到了解决方案！

.carousel-inner .item.active {
  border: #00bfff solid 5px;
}

.carousel-inner .item.active:focus
{
    outline: 2px solid #00bfff;
    outline-offset: -2px;
}

/* FIX FOR EDGE: When Edge impliments outline-offset will want to delete 
this block. But until then this is the best method
to allow a noticeable outline for accessibility
*/
.carousel-inner .item.active:focus::after
{
    content: "";
    height: 99.19%;
    outline: 2px solid #00bfff;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 99.19%;
    z-index: 99999;
}