社区
JavaScript
帖子详情
当鼠标滑过时显示单元格内全部内容的问题
ywduan
2004-03-30 04:32:38
一个td内要显示的内容比较多 为了排版美观
想只显示一部分比如只显示前几个字,当鼠标滑过时又弹出一个虚框 显示td的全部内容 鼠标离开后虚框自动关闭
请问这样的效果应该怎么实现
...全文
286
4
打赏
收藏
当鼠标滑过时显示单元格内全部内容的问题
一个td内要显示的内容比较多 为了排版美观 想只显示一部分比如只显示前几个字,当鼠标滑过时又弹出一个虚框 显示td的全部内容 鼠标离开后虚框自动关闭 请问这样的效果应该怎么实现
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
叮咚叮咚叮叮咚
2004-03-30
打赏
举报
回复
用哪个好来,哈哈~~~
sfply
2004-03-30
打赏
举报
回复
就是啊
二楼的象网易的代码,一大堆
不过有一个好处就是可以立刻显示
TITLE要停留一段时间才可
kisslan
2004-03-30
打赏
举报
回复
用它自带的属性不好么???
<table border="1">
<tr>
<td title="aaaaaaaaaaa bbbbbbbbb ccccccccccccc">aaaaaaaaaa</td>
</tr>
</table>
多菜鸟
2004-03-30
打赏
举报
回复
// Example:
// onMouseOver="toolTip('tool tip text here')";
// onMouseOut="toolTip()";
// -or-
// onMouseOver="toolTip('more good stuff', '#FFFF00', 'orange')";
// onMouseOut="toolTip()";
/*
MOVE this to the <body>:
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<script language="JavaScript"><!--
initToolTips(); //--></script>
*/
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // hide
{
if(ns4) toolTipSTYLE.visibility = "hidden";
else toolTipSTYLE.display = "none";
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#FFFFFF";
var content =
'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' +
'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg +
'"><td align="center"><font face="sans-serif" color="' + fg +
'" size="-2"> \;' + msg +
' \;</font></td></table></td></table>';
if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
if(ie4)
{
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display='block'
}
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}
当鼠标
滑
过表格时,表格的行会高亮
显示
,鼠标离开颜色复原,如果鼠标点击,点击行会保存为红色不变
NULL 博文链接:https://zhangyi6678.iteye.com/blog/430459
layui实现鼠标移动到
单元格
上
显示
数据的方法
今天小编就为大家分享一篇layui实现鼠标移动到
单元格
上
显示
数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
easyui datagrid 增加鼠标悬停弹窗事件
easyui1.4.5增加一个鼠标
滑
过行,注意是行不是列,然后弹出框
显示
某些关键信息,如经典的图片预览操作,内容提供demo,并附修改方法,这个方法是修改的源码,没有增加扩展实现,若愿意请自行实现
jQuery实现鼠标
滑
过鼠标变色功能
jquery实现鼠标移动到表格上后,各行
显示
表格背景不同的颜色,也就是各行高亮效果
表格隔行换色 鼠标移过变色
实现效果为:表格隔行换色 鼠标移过变色 实现多选效果
JavaScript
87,915
社区成员
224,619
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章