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

最新推荐文章于 2022-09-01 02:23:41 发布

jsfantasy

最新推荐文章于 2022-09-01 02:23:41 发布

阅读量300

点赞数

分类专栏： jQuery 文章标签： jQuery mouseover mouseout append remove

本文链接：https://blog.csdn.net/november_chopin/article/details/77183448

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

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