JS的DOM之鼠标悬浮事件
鼠标悬浮事件之 mouseover()和 mouseout()事件
鼠标在这块区域时候会触发相应事件,将鼠标挪开则恢复原先事件
function tableInit(excels){
table.render({
elem: '#partList'
,height: '400'
,cols: [[
//设置行自增编号
{type: 'numbers', fixed: 'left'},
{field: 'path', title: s_path, align: 'center',templet:function (d){
var imgSrc = setter.atlasHost + d.path
return '<div class="viewItem"><img src="'+imgSrc+'" height="28px"></div>'
}},
//设置列可编辑
{field: 'number', title: '<span class="layui-icon layui-icon-edit" style="color: #5fb878;font-size: 12px;">'+s_order_number+'</span>', edit: 'text',align: 'center'},
//鼠标悬浮显示列全部内容
{field: 'vehicleRemarks', title: '<span tips-ld="vehicleRemarks" class="layui-icon layui-icon-edit" style="color: #5fb878;font-size: 12px;">'+s_vehicleRemarks+'</span>', align: 'left',templet:function(d){
//TODO 需要弹层的列绑定class【remarksDom】
return '<label class="remarksDom">'+d.vehicleRemarks +'</label>'
}},
//绑定操作列
{title: s_action, align: 'center', toolbar: '#actionBar', fixed: 'right'}
]]
,data:excels
,limit:Number.MAX_VALUE
});
}
悬浮事件编写
var tipsVal;
// 1.找到触发的事件对象(绑定全局) 2.事件处理程序
$('body').on('mouseover','.remarksDom', function () {
var ovText = $(this).text();
//内容超出长度显示弹层,否则无需弹层
if(ovText.length < 16){
return;
}
var html = "<p style='word-wrap:break-word;width: 150px;'>" + ovText + "</p>";
tipsVal=layer.tips(html,this,{tips:[1,"rgb(58, 61, 73)"]});
});
//鼠标移出
$('body').on('mouseout','.remarksDom', function () {
layer.close(tipsVal);
});
实现效果