抑制 Bootstrap Dismissable Popover 边框突出显示答案

【问题标题】：Suppress Bootstrap Dismissable Popover Border Highlighting抑制 Bootstrap Dismissable Popover 边框突出显示
【发布时间】：2021-09-29 20:06:00
【问题描述】：

当单击链接（或按钮）以显示可关闭的弹出框时，被单击元素的边框会突出显示。这发生在 Bootstrap 文档中的 example 和我的实践页面中。（仅供参考，我打算用图像替换我的文本“[ i ]”；我的假设是突出显示的元素是 href 而不是文本。）

Bootstrap 5 Docs Dismissible Popover 按钮

我的 DismissIble 弹出框

在 Bootstrap Docs 示例中，单击按钮时将以下内容添加到元素中：

aria-describedby="popover808202"

我的代码

<div class="tile-title">
  Modified<span style="float:right;"><a tabindex="0" href="#" title="Help" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Descriptive and useful information can be displayed here.">[ i ]</a></span>
</div>

我的 JavaScript

let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
let popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

期望的结果

我想取消突出显示。

【问题讨论】：

标签： css-selectors bootstrap-5 bootstrap-popover

【解决方案1】：

事实证明这比我想象的要容易。

a:focus {
  outline: none;
  border-color: rgba(0,0,0,0);
  box-shadow: none;
}

这个示例当然会完全禁用整个页面的锚点突出显示（对于所有使用上述 CSS 属性的锚点）。

【讨论】：