文字提示效果-显示和隐藏

最新推荐文章于 2020-06-26 21:03:13 发布

不是我的货

最新推荐文章于 2020-06-26 21:03:13 发布

阅读量529

点赞数

分类专栏： html 文章标签： JS html5

本文链接：https://blog.csdn.net/wym1581/article/details/50607572

版权

html 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	
	var x = 10;
	
	var y = 20;
	
	$(".box").mouseover(function(e){
		
		var hdw = "<div id='two'>"+this.title+"</div>";
		
		$("body").append(hdw);
		
		$("#two")
		
		.css({
				"left":(e.pageX+x)+"px",
				"top":(e.pageY+y)+"px"	

			}).show("fast");

		}).mouseout(function(){
			
			
		$("#two").remove();	
			
			
			}).mousemove(function(e){
				
			$("#two")
		
			.css({
				"left":(e.pageX+x)+"px",
				"top":(e.pageY+y)+"px"	

			});	
				
				
			});

	});
		


</script>
<style type="text/css">

body { font:12px "宋体"; padding:100px; }

#two { width:300px; border:1px solid #ccc; background:#eee;  line-height:30px;  position:absolute; padding:10px; display:none; border-radius:10px;}

</style>

</head>

<body>
<a href="#" class="box" title="新浪、百度、IT行业">文字提示效果</a>
</body>
</html>

不是我的货

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字提示效果-显示和隐藏

无标题文档$(document).ready(function(){ var x = 10; var y = 20; $(".box").mouseover(function(e){ var hdw = ""+this.title+""; $("body").append(hdw); $("#two") .css({ "le
复制链接

扫一扫

专栏目录