抑制 Bootstrap 可消除的弹出框边框突出显示
Suppress Bootstrap Dismissable Popover Border Highlighting
单击 link(或按钮)以显示可关闭的弹出框时,被单击元素的边框会突出显示。 Bootstrap 文档中的 example 和我的页面实际上会发生这种情况。 (仅供参考,我计划用图像替换我的文本“[i]”;我的假设是突出显示的元素是 href
而不是文本。)
Bootstrap 5 个 Docs Dismissible 弹出按钮
我的 DismissIble 弹出窗口
在 Bootstrap 文档示例中,单击按钮时将以下内容添加到元素中:
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'
})
想要的结果
我想取消突出显示。
事实证明这比我想象的要容易。
a:focus {
outline: none;
border-color: rgba(0,0,0,0);
box-shadow: none;
}
此示例当然会为整个页面完全禁用锚点突出显示(对于使用上述 CSS 属性的所有锚点)。
单击 link(或按钮)以显示可关闭的弹出框时,被单击元素的边框会突出显示。 Bootstrap 文档中的 example 和我的页面实际上会发生这种情况。 (仅供参考,我计划用图像替换我的文本“[i]”;我的假设是突出显示的元素是 href
而不是文本。)
Bootstrap 5 个 Docs Dismissible 弹出按钮
我的 DismissIble 弹出窗口
在 Bootstrap 文档示例中,单击按钮时将以下内容添加到元素中:
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'
})
想要的结果
我想取消突出显示。
事实证明这比我想象的要容易。
a:focus {
outline: none;
border-color: rgba(0,0,0,0);
box-shadow: none;
}
此示例当然会为整个页面完全禁用锚点突出显示(对于使用上述 CSS 属性的所有锚点)。