我的应用程序中有一个客户记录列表(表格中的 tr)。
当用户将鼠标悬停在记录 (tr) 上时,我想显示一个悬停在其他记录上的 div,并显示有关记录的更多详细信息。
我希望 div 然后用鼠标移动 - 即,如果他们将鼠标向右移动 20 像素,以便他们可以看到记录上的不同字段(tr),那么现在未隐藏的 div 应该向右移动 20 像素跟随光标。
这对 Javascript/CSS 可行吗?
我的应用程序中有一个客户记录列表(表格中的 tr)。
当用户将鼠标悬停在记录 (tr) 上时,我想显示一个悬停在其他记录上的 div,并显示有关记录的更多详细信息。
我希望 div 然后用鼠标移动 - 即,如果他们将鼠标向右移动 20 像素,以便他们可以看到记录上的不同字段(tr),那么现在未隐藏的 div 应该向右移动 20 像素跟随光标。
这对 Javascript/CSS 可行吗?
是的。使用 CSS 属性执行可见/不可见部分visiblility:visible/hidden
,设置position
为absolute
然后将值分配给元素上的top
(y-coordinate) 和left
(x-coordinate) 。mousemove
很有可能,它们被称为“工具提示”,其中可能有很多。看起来这里有一个轻量级的,可以做你想做的。
如果您使用的是框架(jQuery/prototype/mootools 等),那么很可能会有插件也可以做到这一点。
对于预打包的 jquery 解决方案:http: //jquery.bassistance.de/tooltip/demo/。
查看启用了跟踪的示例。