时间戳

首页 > 解决方案 > 抑制 Bootstrap Dismissable Popover 边框突出显示

css-selectors - 抑制 Bootstrap Dismissable Popover 边框突出显示

问题描述

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

Bootstrap 5 Docs Dismissible Popover 按钮

Bootstrap 5 Dismissible Popover 按钮图像

我的 DismissIble Popover

我的 Dismissible Popover href

在 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-selectorsbootstrap-5bootstrap-popover

解决方案

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

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

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

推荐阅读