Jquery 出现的问题，如图
我想用Jquery实现QQ空间的那种效果，把鼠标放到头像上就可以显示出一个详细信息的div，然后当鼠标离他时，然后那个div就消失掉，然后下面是我用的代码：$(/*rea...
我想用Jquery实现QQ空间的那种效果，把鼠标放到头像上就可以显示出一个详细信息的div，然后当鼠标离他时，然后那个div就消失掉，然后下面是我用的代码：
$(
/*ready事件开始*/
function()
{
$(".ul_Vote li img").mouseover(function(e){
var tooltip="<div id='tooltip'><b>"+this.alt+"</b><hr/>网络投票时，投票人按照真实姓名、学号进行投票，并确保真实，否则无效。主办单位对投票人信息严格保密。"+"</div>";
$("body").append(tooltip);
$("#tooltip").css(
{
"top":e.pageY-5+"px",
"left":e.pageX-5+"px"
}
).fadeIn("slow");
}
).mouseout(function()
{
$("#tooltip").remove();
}
)
}
/*ready事件结束*/
);
然后效果就如我刚刚插入的图片了，但是问题来了，不知道怎么回事会在下面出现这个不能消除的DIV块，（左下方的那个就是）而且是一大堆一大堆的
那个div的id是tooltip,他的CSs样式如下：
#tooltip{
width:180px;
position:absolute;
background:#ffffb9;
border:1px solid #ff0900;
padding:5px;
}
怎么样子才能让下面的那个消失掉呀，学习…… 展开
$(
/*ready事件开始*/
function()
{
$(".ul_Vote li img").mouseover(function(e){
var tooltip="<div id='tooltip'><b>"+this.alt+"</b><hr/>网络投票时，投票人按照真实姓名、学号进行投票，并确保真实，否则无效。主办单位对投票人信息严格保密。"+"</div>";
$("body").append(tooltip);
$("#tooltip").css(
{
"top":e.pageY-5+"px",
"left":e.pageX-5+"px"
}
).fadeIn("slow");
}
).mouseout(function()
{
$("#tooltip").remove();
}
)
}
/*ready事件结束*/
);
然后效果就如我刚刚插入的图片了，但是问题来了，不知道怎么回事会在下面出现这个不能消除的DIV块，（左下方的那个就是）而且是一大堆一大堆的
那个div的id是tooltip,他的CSs样式如下：
#tooltip{
width:180px;
position:absolute;
background:#ffffb9;
border:1px solid #ff0900;
padding:5px;
}
怎么样子才能让下面的那个消失掉呀，学习…… 展开
3个回答
展开全部
是不是还有别的js代码？生成了多个id是tooltip的div时，只要第一个会被 赋予 "top":e.pageY-5+"px","left":e.pageX-5+"px"的样式，因为用的是$("body").append(tooltip);所以其他的会加在最后了。可以判断时候有tooltip，没有就添加，有就改变它的html，如下，鼠标放在tooltip上也不消失。
<!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>
</head>
<style>
#tooltip{
width:180px;
position:absolute;
background:#ffffb9;
border:1px solid #ff0900;
padding:5px;
}
</style>
<script language="javascript" src="/js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".ul_Vote li img").mouseover(function(e){
var $img = this;
var tooltip="<div id='tooltip'></div>";
if($("#tooltip").html() == null){
$("body").append(tooltip);
}
$("#tooltip").html("<b>"+this.alt+"</b><hr/>网络投票时，投票人按照真实姓名、学号进行投票，并确保真实，否则无效。主办单位对投票人信息严格保密。").css({
"top":e.pageY-5+"px",
"left":e.pageX-5+"px"
})
.fade In("slow")
.mouseout(function(e){
removetip($(this),$img,e);
});
})
.mouseout(function(e){
removetip($("#tooltip"),this,e);
});
});
function removetip(tip,img,e){
var toffset = $(tip).offset();
var tleft = toffset.left;
var ttop = toffset.top;
var twith = $(tip).width();
var theight = $(tip).height();
var ioffset = $(img).offset();
var ileft = ioffset.left;
var itop = ioffset.top;
var iwith = $(img).width();
var iheight = $(img).height();
if(e.pageX < ileft || ( e.pageX > (tleft + twith) && e.pageX > (ileft+iwith) ) || e.pageY < itop || (e.pageY > (ttop + theight) && e.pageY > (itop + iheight)) || (e.pageY > (itop + iheight) && e.pageX < tleft) || (e.pageX > (ileft + iwith) && e.pageY < ttop )){
$(tip).remove();
}
}
</script>
<body>
<ul class="ul_Vote">
<li><img src="images/7t2bpy_ayjp_0425.gif" alt="1" width="100" height="100" border="1" /><br />
<br /><br />
<br />
</li>
<li><img src="images/9ty361_ayjp_0426.gif" alt="2" width="100" height="100" border="1" /><br />
<br /><br />
<br />
</li>
<li><img src="images/14unnj_ayjp_0411.gif" alt="3" width="100" height="100" border="1" /><br />
<br /><br />
<br />
</li>
</ul>
</body>
</html>
jQuery及图片路径改成自己实际路径
<!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>
</head>
<style>
#tooltip{
width:180px;
position:absolute;
background:#ffffb9;
border:1px solid #ff0900;
padding:5px;
}
</style>
<script language="javascript" src="/js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".ul_Vote li img").mouseover(function(e){
var $img = this;
var tooltip="<div id='tooltip'></div>";
if($("#tooltip").html() == null){
$("body").append(tooltip);
}
$("#tooltip").html("<b>"+this.alt+"</b><hr/>网络投票时，投票人按照真实姓名、学号进行投票，并确保真实，否则无效。主办单位对投票人信息严格保密。").css({
"top":e.pageY-5+"px",
"left":e.pageX-5+"px"
})
.fade In("slow")
.mouseout(function(e){
removetip($(this),$img,e);
});
})
.mouseout(function(e){
removetip($("#tooltip"),this,e);
});
});
function removetip(tip,img,e){
var toffset = $(tip).offset();
var tleft = toffset.left;
var ttop = toffset.top;
var twith = $(tip).width();
var theight = $(tip).height();
var ioffset = $(img).offset();
var ileft = ioffset.left;
var itop = ioffset.top;
var iwith = $(img).width();
var iheight = $(img).height();
if(e.pageX < ileft || ( e.pageX > (tleft + twith) && e.pageX > (ileft+iwith) ) || e.pageY < itop || (e.pageY > (ttop + theight) && e.pageY > (itop + iheight)) || (e.pageY > (itop + iheight) && e.pageX < tleft) || (e.pageX > (ileft + iwith) && e.pageY < ttop )){
$(tip).remove();
}
}
</script>
<body>
<ul class="ul_Vote">
<li><img src="images/7t2bpy_ayjp_0425.gif" alt="1" width="100" height="100" border="1" /><br />
<br /><br />
<br />
</li>
<li><img src="images/9ty361_ayjp_0426.gif" alt="2" width="100" height="100" border="1" /><br />
<br /><br />
<br />
</li>
<li><img src="images/14unnj_ayjp_0411.gif" alt="3" width="100" height="100" border="1" /><br />
<br /><br />
<br />
</li>
</ul>
</body>
</html>
jQuery及图片路径改成自己实际路径
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(
/*ready事件开始*/
function()
{
$(".ul_Vote li img").mouseover(function(e){
var tooltip=$("<div id='tooltip'><b>"+this.alt+"</b><hr/>网络投票时，投票人按照真实姓名、学号进行投票，并确保真实，否则无效。主办单位对投票人信息严格保密。"+"</div>");
tooltip.css(
{
"top":e.pageY-5+"px",
"left":e.pageX-5+"px",
"display":"none"
}
)
.appendTo("body")
.fadeIn("slow");
}
).mouseout(function()
{
$("#tooltip").remove();
}
);
});
/*ready事件开始*/
function()
{
$(".ul_Vote li img").mouseover(function(e){
var tooltip=$("<div id='tooltip'><b>"+this.alt+"</b><hr/>网络投票时，投票人按照真实姓名、学号进行投票，并确保真实，否则无效。主办单位对投票人信息严格保密。"+"</div>");
tooltip.css(
{
"top":e.pageY-5+"px",
"left":e.pageX-5+"px",
"display":"none"
}
)
.appendTo("body")
.fadeIn("slow");
}
).mouseout(function()
{
$("#tooltip").remove();
}
);
});
追问
如果是display:none了，我们还能看到吗？
追答
fadeIn("slow");
渐近显示
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
设置display为none
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
