css - 更改数据表分页颜色后出现“奇怪的”黑色效果

Question

我找到了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

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

Answer 1

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

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

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