素材牛VIP会员

鼠标悬浮一行弹出提示文本说明效果

 浏览:804次-  评论:0次-  发布时间:2017-05-10
    Html
    Css
    Js
↑上面代码改变,会自动显示代码结果
jQuery调用版本:1.9.0
素材牛VIP永久特权
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
代码描述:有时候,我们希望能够再鼠标悬浮一行的时候弹出提示说明效果。

代码注释

(1).$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。

(2).x = 5和y = 15,用来规定弹出的层距离鼠标指针的距离。

(3).$("p").hover(function (e) {}, function () {}),为p元素注册事件处理函数,也就是规定鼠标悬浮和鼠标离开要执行的函数。

(4). otitle = this.title,获取当前鼠标悬浮的p元素的title属性值,并赋值给变量otitle。

(5).this.title = "",这个代码和上一段代码的目的是为了防止默认的title弹出层的出现,我们要显示的是自定义的。

(6).var ndiv = "<div id='leo'>" + otitle + "</div>",这是弹出的自定义信息层。

(7).$("body").append(ndiv),追加到body中。

(8).$("#leo").css({

  "top": (e.pageY + y) + "px",

   "left": (e.pageX + x) + "px"

}).show(2000),设置弹出层的坐标,并且显示出来。

(9). $(this).mousemove(function (e) {

  $("#leo").css({

    "top": (e.pageY + y) + "px",

    "left": (e.pageX + x) + "px"

  }).show(1000);

}),为当前元素注册mousemove事件处理函数。

也就是实现了当鼠标移动的时候,弹出层能够跟随移动。

(10).function () {

  this.title = otitle;

  $("#leo").remove();

}),规定当鼠标离开时候,将元素的title属性复原,并且移除弹出层。

讨论这个常用代码(0)回答他人问题或分享心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的积分余额:0 已下载次数:804
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)