如何使用数据表删除上一个/下一个链接上的悬停样式

时间:2017-06-28 20:39:15

标签: html css datatables

我正在尝试删除DataTables中上一个/下一个链接上的悬停样式,但由于某种原因它没有起作用。我想简单地在图像上显示透明边框而不是悬停时的黑色背景。我怎样才能做到这一点?

目前的情况如下。

enter image description here

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;
}

2 个答案:

答案 0 :(得分:1)

这就是我开始工作的方式。 DataTables有它的win类,所以我只是修改它们而不是改变img。

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
   background: none;
   color: black!important;
   border-radius: 4px;
   border: 1px solid #828282;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
   background: none;
   color: black!important;
} 

答案 1 :(得分:0)

我无法看到&#34; img&#34;在您的CSS或&#34;班级#34;在你的图像元素()。