'Strange' 更改数据表分页颜色后的黑色效果

Question

我发现 this question on Whosebug 可以更改数据表的分页颜色。

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

.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

鼠标悬停在某个页面上时如何去掉这个黑框？

Answer 1

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

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

Answer 2

由于数据表 jquery，鼠标悬停时显示背景色。我们无法对核心库进行更改。要摆脱这个，你需要使用 background:transparent;在父级 class 上具有重要意义。

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

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

'Strange' 更改数据表分页颜色后的黑色效果

'Strange' black color effect after changing datatables pagination color

css

datatables