修改Datatables分页颜色后hover出现异常黑色效果如何解决

问题根因 #

你遇到的hover后残留的黑色框，是浏览器默认的焦点外框（outline），以及Bootstrap/Datatables自带的focus、active状态样式未被覆盖导致的，你之前只设置了hover状态的样式，缺了其他交互状态的规则。

修正方案 #

将你的CSS替换为以下代码即可：

.page-item.active .page-link {
    color: #fff !important;
    background-color: #193D4C !important;
    border-color: #193D4C !important; 
    outline: none !important;
    box-shadow: none !important;
}

.page-link {
    color: #193D4C !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important; 
    outline: none !important;
    box-shadow: none !important;
}

.page-link:hover,
.page-link:focus,
.page-link:focus-visible,
.page-link:active {
    color: white !important;
    background-color: #193D4C !important;
    border-color: #193D4C !important; 
    outline: none !important;
    box-shadow: none !important;
}

调整说明 #

1. 将激活态的边框颜色从黑色改为主题色#193D4C，避免激活态本身显示黑色边框
2. 新增了focus、focus-visible、active三种交互状态的样式覆盖，保证所有操作场景下样式统一
3. 新增outline: none清除浏览器默认的黑色焦点外框
4. 新增box-shadow: none清除Bootstrap默认给分页按钮添加的焦点阴影

如果仍有残留样式，可额外添加兜底规则覆盖Datatables原生分页类样式：

.dataTables_wrapper .paginate_button:focus {
    outline: none !important;
    box-shadow: none !important;
}

内容的提问来源于stack exchange，提问作者Cheknov