javascript - 如何更改 DataTables 中分页按钮的默认悬停样式

Question

有人可以帮我更改/删除 DataTables 中分页按钮的黑色背景颜色吗？我问了很多问题，但没有得到任何帮助。我只是不想在悬停时显示颜色变化。 paginate_button 更改按钮的颜色，但不会更改背景颜色。我什至尝试过 a.paginate_button 但没有成功。我真的不知道还能做什么。

JQuery

var table = $('#esignTable').DataTable({"sDom": '<"top"flp>rt<"bottom"i><"clear">',
  pagingType: 'input',
  pageLength: 5,
  language: {
    "sEmptyTable": " ",
    oPaginate: {
        "sNext": '<img src="../images/integration/SlowRight.jpg">',
        "sPrevious": '<img src="../images/integration/SlowLeft.jpg">',
        "sFirst": '<img src="../images/integration/FastLeft.jpg">',
        "sLast": '<img src="../images/integration/FastRight.jpg">',
    }
  }   
}); 

CSS

.dataTables_filter, .dataTables_info, .dataTables_length { 
display: none; 
}

.top {
display: block;
margin: 0 auto;
margin-right: 41%;
}

.dataTables_paginate input {
width: 30px;
display: inline-block;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
padding : 2px;
margin-left: 0px;
display: inline;
border: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
text-decoration: none;
}

table.dataTable tr:nth-child(odd)  { 
background-color: #FFFACD;  
}

img:hover {
 border-radius: 0px;
border: 1px solid #828282;
background-color: transparent;
}

谢谢

Answer 1

将此添加到 HTML 正文的末尾。应该工作

<style>
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: none;
  color: black!important;
  /*change the hover text color*/
}


/*below block of css for change style when active*/

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  background: none;
  color: black!important;
}
</style>

发生这种情况是因为它成功地覆盖了默认的 css。您也可以通过将其放在单独的文件中并在包含所有外部链接后包含它来实现!