我要的效果是 弹出的那个var tooltip="<div id='tooltip'>"+this.myTitle+"</div>"; 在鼠标移上去的时候显
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.4.4/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e)
{
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
$("body").append(tooltip);
$("#tooltip").css(
{
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}
).show("fast");
alert(e.pageY+y);
alert(e.pageX+x);
}
).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>
不错啊 加了这个CSS就好了 我加了别的样式 一直都是会不断添加重复显示 为什么加了这个绝对定位就好了呢 展开
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.4.4/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e)
{
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
$("body").append(tooltip);
$("#tooltip").css(
{
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}
).show("fast");
alert(e.pageY+y);
alert(e.pageX+x);
}
).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>
不错啊 加了这个CSS就好了 我加了别的样式 一直都是会不断添加重复显示 为什么加了这个绝对定位就好了呢 展开
2个回答
展开全部
给你改写了下，看看是不是这个效果。你应该学学CSS样式的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("body > p > a").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip' style='position:absolute;border:1px solid #999;background:#ebebeb;font-size:12px;padding:10px;'>"+this.myTitle+"</div>";
$("body").append(tooltip);
$("#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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("body > p > a").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip' style='position:absolute;border:1px solid #999;background:#ebebeb;font-size:12px;padding:10px;'>"+this.myTitle+"</div>";
$("body").append(tooltip);
$("#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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
response.Write "onmouseover="&chr(34)&"toolTip(<a href='onecase.asp?ID="&rs("id")&"'><img width='600px' height='700px' src='../Upload/PicFiles/2010.5.11_10.9.56_9307.jpg'/></a>)"&chr(34)&" "
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
