2009.12.15——JQuery(一个鼠标的例子)-优快云博客

本文介绍如何使用jQuery创建自定义的鼠标悬停提示框，包括解决提示框与默认提示同时出现的问题，以及实现提示框跟随鼠标移动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2009.12.15——JQuery(一个鼠标的例子)
大家先看一下html代码吧

<body>
	<ul>
		<p><a href="#" class="s" title="这是超级链接的提示1">提示1</a></p>
		<p><a href="#" class="s" title="这是超级链接的提示2">提示2</a></p>
		<p><a href="#" title="这是自带的提示1">自带提示1</a></p>
		<p><a href="#" title="这是自带的提示2">自带提示2</a></p>
	</ul>
</body>

我的目标就是当我鼠标放到“提示1”上，会显示title显示的内容，但是不要html自带的那个提示，那个提示太难看了
下面是一些css

<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{
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:1px;
	color:#333;
	display:none;
}//先定义一个css样式，供以后的id为tooltip的div使用
</style>

代码如下：

<script type="text/javascript">

$(function(){
	$("a.s").mouseover(function(e){
		var s_div = "<div id='tooltip'>"+this.title+"</div>";//注意这里的id，必须为	

								       tooltip
		$("body").append(s_div);
		$("#tooltip").css({
			"top": e.pageY + "px",
			"left": e.pageX + "px"
		}).show("fast");
	}).mouseout(function(){
		$("#tooltip").remove();
	});
	});
})
</script>

这个代码很简单，就是当鼠标滑过a.s时，建一个id为tooltip的div，添加到body后面，并设置div的位置，

添加到鼠标后面

但是会有两个问题：
1.我自定义的div会显示，但是那个自动提示的也会显示，就很烦人了
2.有时候鼠标经过时，不显示自定义的
解决问题1：
在mouseover里面加上

this.myTitle = this.title;
this.title = "";
var s_div = "<div id='tooltip'>"+this.myTitle+"</div>";

在mouseout里面加上

this.title = this.myTitle;

解决问题2：
这个的原因是自制提示和鼠标的距离太近了，修改如下：

var x = 5;
var y = 10;
$("#tooltip").css({
	"top": (e.pageY+y) + "px",
	"left": (e.pageX+x) + "px"
})

这样两个问题就解决了

后来有想要点功能，想让那个自制的提示可以跟着鼠标动，于是

<script type="text/javascript">

$(function(){
	var x = 5;
	var y = 10;
	$("a.s").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";
		var s_div = "<div id='tooltip'>"+this.myTitle+"</div>";
		$("body").append(s_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>

这样就可以了，其实可以应用到图片上面，效果就更漂亮了，方法同上，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>鼠标移动</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<style type="text/css">
body{
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
img{border:none;}
ul,li{
	margin:0;
	padding:0;
}
li{
	list-style:none;
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #AAAAAA;
}


#tooltip{
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:1px;
	color:#333;
	display:none;
}
</style>
<script type="text/javascript">

$(function(){
	var x = 5;
	var y = 10;
	$("a.s").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";
		var s_div = "<div id='tooltip'><img src='"+this.href+"'></img></div>";
		$("body").append(s_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>
	<ul>
		<li><a href="images/1.jpg" class="s" title="河道"><img src="images/11.jpg" 

/></a></li>
		<li><a href="images/2.jpg" class="s" title="农业"><img src="images/22.jpg" 

/></a></li>
		<li><a href="images/3.jpg" class="s" title="墒情"><img src="images/33.jpg" 

/></a></li>
	</ul>
</body>
</html>