悬停缩放在数据表的第二页上不起作用

Hover zoom doesnt work on second page of datatable

本文关键字：二页 不起作用 缩放 数据表 悬停      更新时间：2023-10-30

我在数据库的最后一列显示了img缩略图

$.each(data,function(i,d){
    d['index']=i+1; 
    url = url
    d["ad_image"] = '<a href="#" ><img src="'+url+'" class="img-zoom" /></a>'
})  
table = $('#datatable4').dataTable({
    'paging':   true,  
    'ordering': true,  
    'info':     true,  
    "destroy": true,
    "aaData" : data,
    aoColumns: [
      { mData: 'index' },
      { mData: 'ad_title' },
      { mData: 'ad_details' },
      { mData: 'ad_image' },
    ]
});

img缩放类css：

.img-zoom {
width: 310px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
.transition {
-webkit-transform: scale(2); 
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}

但当我转到第二页时，缩放图像不起作用。。。在第一页它的工作。。。如何在此处使用fndrawcallback？？或者还有其他选择吗？？

$('.img-zoom').hover(function() {
    $(this).addClass('transition');
}, function() {
    $(this).removeClass('transition');
});

使用委托的事件处理程序-执行代码时第2页的内容不可用，这就是为什么缩放在第2页不起作用：

$('#datatable4').on('mouseenter', '.img-zoom', function() {
    $(this).addClass('transition')
})
$('#datatable4').on('mouseleave', '.img-zoom', function() {
    $(this).removeClass('transition')
})

已更新。hover伪事件名称不能像我建议的那样使用，其作用与hover()相同。我的坏。使用上面的解决方案，这里有一个演示->http://jsfiddle.net/wa0oykv7/找到例如seq #57（最后一行），并将鼠标悬停在具有类.img-zoom的第一列上。

相关文章：