jQuery学习笔记——DOM练习（1）

来源：互联网发布：手机天猫手机淘宝编辑：程序博客网时间：2024/04/30 16:47

<!--作者：1377378268@qq.com时间：2017-08-12描述：超链接提示效果，当鼠标移动到超链接上，自动提示显示提示。当鼠标移动时，提示跟着移动--><!DOCTYPE html><html><head><meta charset="UTF-8"><title>超链接提示效果</title><script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">body{margin:0;padding:40px;background:#fff;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;}p{clear:both;margin:0;padding:.5em 0;}/* tooltip */#tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:1px;color:#333;display:none;}</style><script type="text/javascript">$(function(){var x = 10;var y = 20;$("a.tooltip").mouseover(function(e){//鼠标移入事件//把a元素中的title值取出并清空this.myTitle = this.title;this.title = "";//创建Div文档$("body").append("<div id='tooltip'>"+this.myTitle+"</div>");$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");}).mouseout(function(){//鼠标移出事件this.title = this.myTitle;$("#tooltip").remove();}).mousemove(function(e){//鼠标移动事件$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});});})</script></head><body><p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p><p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p><p><a href="#" title="这是自带提示1.">自带提示1.</a></p><p><a href="#" title="这是自带提示2.">自带提示2.</a> </p></body></html>

效果：（由于截图原因没有显示鼠标）

阅读全文

0 0