想实现这样一个功能，就是在一个表格中，由于很多字过多，所以用文字溢出的方法处理了，但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。
css部分
html部分
| 序号 | 名称 | 类别 | 单位 | 成果要求 | 进展 | |
|---|---|---|---|---|---|---|
| 最新进展 | 更新时间 | |||||
| 1 | 阿拉蕾 | 阿拉蕾 | 阿拉蕾 | 阿拉蕾 | 阿拉蕾 | |
| 2 | 阿拉蕾 | 阿拉蕾 | 阿拉蕾 | 阿拉蕾 | 阿拉蕾 | |
| 3 | 阿拉蕾 | 阿拉蕾 | 阿拉蕾, | 阿拉蕾 | ||
js部分
$(function() {
function showBox(obj,box){
var timer = null;
$(obj).on("mouseover", function (e) {
clearTimeout(timer);
var clientX = e.clientX;
var clientY = e.clientY;
var txt = $(this).text();
timer = setTimeout(function () {
console.log(clientX, clientY);
$(box).css("left", clientX).css("top", clientY);
if (txt == "") {
$(box).hide();
} else {
$(box).show();
$(box).html(txt);
}
}, 1000);
});
$(obj).on("mouseout",function(){
clearTimeout(timer);
$(box).hide();
});
}
showBox("#example1 > tbody td","#showbox");
});
最后，其实bootstrap里面有个组建可以显示里面的内容，只是显示的是title，一开始不会改没用那个，后经人点醒，可以直接给title赋值，就是给title赋值为表格里面的text就好。
以上所述是小编给大家介绍的基于JS代码实现当鼠标悬停表格上显示这一格的全部内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对全福编程网网站的支持！
