更改数据表分页颜色后的“奇怪”黑色效果答案

【问题标题】：'Strange' black color effect after changing datatables pagination color更改数据表分页颜色后的“奇怪”黑色效果
【发布时间】：2021-11-02 09:41:16
【问题描述】：

我找到this question on StackOverflow 用于更改数据表的分页颜色。

我尝试了一些虚拟编辑提供的解决方案：

.paging_full_numbers a.paginate_button {
    color: pink !important;
    background-color: white !important;
}
.paging_full_numbers a.paginate_active {
    color: green !important;
    background-color: green !important;
}

但它没有用。

我也尝试了提供的第二种解决方案：

.page-item.active .page-link {
    color: #fff !important;
    background-color: #193D4C !important;
    border-color: #000 !important; 
}

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

.page-link:hover {
    color: white !important;
    background-color: #193D4C !important;
    border-color: #193D4C !important; 
}

它越来越接近我想要的，但随机出现我不知道如何摆脱的黑色 css 效果。

当前结果：

Live DEMO of the code

当我将鼠标悬停在某个页面上时，如何摆脱这个黑框？

【问题讨论】：

标签： css datatables

【解决方案1】：

由于数据表 jquery，背景颜色在悬停时显示。我们无法对核心库进行更改。要摆脱这种情况，您需要使用 background:transparent;在具有重要意义的父类上。

将此样式添加到您的 CSS 文件中。

.paginate_button:hover
{
  background:transparent !important;
  border:none !important;
}

【讨论】：

【解决方案2】：

您可以覆盖使用以下 CSS 代码添加的 background color 和 border：

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none !important;
    border: none !important;
}

【讨论】：