本文实例讲述了jquery实现鼠标滑过显示提示框的方法。分享给大家供大家参考。具体如下:
一、jquery鼠标滑过显示提示框实例
1、效果图
2、实现代码 ( 需要自行添加 jquery.js、按钮图片、提示框图片 )
HTML 代码
二、jquery鼠标滑过显示提示框实例二
鼠标划过用户名时,在鼠标右下角显示div展示用户资料这个效果
1、效果图
2、实现方式
无非就三大块,一个是div的定位,这个是该效果的主要难点;二个是通过ajax异步加载数据;第三个就是要用到两个js属性onmouseover和onmouseout,即鼠标经过和鼠标离开。
3、实现步骤
(1)、首先设计好要显示用户资料的div的样式, 这里要注意的该方法不是给每个用户名的旁边都绑定一个div,当鼠标经过时显示,鼠标离开时隐藏,网页里就一个显示信息的div,哪里需要显示时就定位在哪里,这要就需要把该div的定位方式设置为绝对定位。
HTML代码:
(2)、相应的css代码
(3)、定位,为了能够准确的定位并且能够方便的调用,所以先在页面中放了两个标签,分别用于保存当前鼠标的坐标
然后用js获取当前坐标并保存到标签中:
(4)、鼠标经过并离开事件js代码
$("#lblusername").html("")
$("#lblrealname").html("");
$("#sex").html("");
$("#lbladdress").html("")
$("#lblemall").html("");
}
(5)、调用
希望本文对大家的 jQuery 程序设计有所帮助。