jquery - 在 CSS 轮廓上添加焦点和覆盖会导致轮廓消失

Question

我有一个包含 Bootstrap Carousel 的 Bootstrap 模态。我需要在轮播中处于事件状态的幻灯片才能获得焦点。我试图覆盖轮廓样式以使焦点更加可见(尤其是在 Edge 中)。我可以成功聚焦(出于演示目的，codepen 只会在第一张幻灯片上执行此操作)，如果我不覆盖轮廓，则可以在图像上看到默认的浏览器轮廓。但是，当我尝试覆盖轮廓时，它会完全消失。

代码笔: https://codepen.io/VVarPiglet/pen/QqegMd

HTML

  <div class="main">
<div class="button">
  <button class="modal-pop">Open Modal</button>
</div>
<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true" data-hidden-by="user">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true" class="close-symbol">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="my-carousel" class="carousel slide" data-interval="false" data-wrap="false">
                    <div class="carousel-inner">
                      <div class="item card active" tabindex="1">
                        <img class="card-image" src="https://www.w3schools.com/css/img_fjords.jpg"/>
                      </div>
                      <div class="item card" tabindex="1">
                        <img class="card-image" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"/>
                      </div>
                    </div>
                    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous Label</span>
                    </a>
                    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next Label</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

  .main{
    width: 100%;
   }
  .button{
    margin: 20px auto;
    text-align: center;
   }

  #my-modal{
    width 500px;
  }

  .card-image{
    width: 100%
  }

  .modal-body{
    padding: 0;
  }

  /** comment the below out to see the outline that automatically takes place. It is a little hard to see, but it is a 1px solid blue outline */
  .carousel-inner .item.active:focus
  {
     outline: #00bfff solid 5px;
  }

重现步骤:

1. 导航到代码笔。
2. 按下按钮打开模式。
3. 请注意，没有轮廓来描述重点。
4. 打开 CSS 编辑器。
5. 向下滚动到末尾并删除或注释掉大纲覆盖。
6. 保存。
7. 按下按钮打开模式。
8. 请注意，图像具有描述焦点的轮廓。

如何成功覆盖大纲？

Answer 1

据我所知，如果您的目标是 .active 元素，我不确定您是否需要 :focus。此外，overflow: hidden 确实隐藏了轮廓。

试试这个:

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