在现代的浏览中,它们自带了超链接提示,但这个提示效果的响应速度是非常缓慢的,考虑到良好的人机交互,需要当鼠标移动到超链接的一瞬间就出现提示。
原图(未触发事件的效果图):
事件触发效果图:
实现这个效果的具体思路:
1、当鼠标滑入超链接
(1)创建一个div元素,其内容为title属性的值
(2)将创建的元素追加到文档中
(3)设置x坐标和y坐标,使它显示在鼠标位置的旁边
2、当鼠标滑出超链接是,移除div元素
3、当鼠标在超链接上移动时,提示效果跟鼠标一起移动
html代码:
css代码:
js代码: