jQuery学习笔记——DOM练习(1)

<!--
	作者: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>

效果:(由于截图原因没有显示鼠标)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值