700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jQuery 鼠标指针 悬浮在文字上提示信息

jQuery 鼠标指针 悬浮在文字上提示信息

时间:2022-11-01 20:51:43

相关推荐

jQuery 鼠标指针 悬浮在文字上提示信息

鼠标提示代码:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><style>#div_toop {background-color:#93ee15;}</style><script src="Scripts/jquery-1.11.3.js"></script><script>$(function () {//鼠标位于 a标签上方时发生 mouseover 事件$("a.Hyperlink").mouseover(function (e) {this.Mytitle = this.title;//获取超链接 title属性的内容this.title = ""; //设置 title属性内容为空$("body").append("<div id='div_toop'>" + this.Mytitle + "</div>");//将要显示的内容添加到 新建 div标签中 并追加到 body 中$("#div_toop").css({//设置 div 内容位置 "top": (e.pageY + 10) + "px","position": "absolute",//添加绝对位置"left": (e.pageX + 20) + "px"}).show("fast");// show(spe.ed,callback) speed: xian'shi'su'du}).mouseout(function () { //鼠标指针从 a标签 上离开时 发生mouseout 事件this.title = this.Mytitle;$("#div_toop").remove();//移除对象}).mousemove(function (e) { //鼠标指针在 a标签 中移动时 发生mouseout 事件$("#div_toop").css({//设置 div 内容位置 "top": (e.pageY + 10) + "px","position": "absolute",//添加绝对位置"left": (e.pageX + 20) + "px"});});});</script></head><body><p><a href="#" class="Hyperlink" title="超链接1">超链接·1</a></p><p><a href="#" class="Hyperlink" title="超链接2">超链接·2</a></p></body></html>

效果图:

显示提示信息:

提示信息可以随鼠标指针移动

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。