为什么弹出式div的两次追加
为什么弹出式div的两次追加
提问于 2010-10-19 13:25:52
嗨，我有以下代码
<!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" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.card {
border:1px solid transparent;
cursor:pointer;
float:left;
height:136px;
margin:10px;
padding:3px;
width:136px;
}
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px !important;
}
</style>
</head>
<body>
<!-- <div id="popupContact" style="position:absolute;left:100px;top:100px;width:100px;height:50px;background-color:orange;border:1px solid red ;">
</div> -->
<div class="card ui-corner-all" id="card-208">
<div class="card-name"> Rahul1's Gib 1 </div>
</div>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function(){
var popup_pos=$('#card-208').offset();
var timer;
$("#card-208").mouseenter(function() {
if($("#divtoshow").length==0){
$("#card-208").append('<div id="divtoshow" style="display:block;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;">'+
'dsfdssd <a href="#">rahul</a>'+
'</div>')
}
$("#divtoshow").css('position',"absolute");
$("#divtoshow").css('top',popup_pos.top-120);
$("#divtoshow").css('left',popup_pos.left-120);
//~ $("#divtoshow").show();
});
$("#divtoshow").live('mouseleave', function() {
$(this).remove();
});
});
</script>问:为什么在鼠标离开时，divtoshow没有隐藏它，当我再次将鼠标移到它上面时，隐藏它。
问候
拉胡尔
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-10-19 19:49:31
我已经自己完成了，我已经看到了别人的解决方案，他们很好，感谢他们的回答。
Stack Overflow用户
发布于 2010-10-19 13:36:39
你需要在那里做一些修改：
通过this为事件处理程序中的#divtoshow
- access元素更改
- 以进行
.live()绑定
示例：http://www.jsfiddle.net/YjC6y/23/
Stack Overflow用户
发布于 2010-10-19 13:32:00
您可以通过以下方式删除鼠标离开事件时的divtoshow
$("#divtoshow").remove();或在鼠标悬停在popupContact div的事件上时，首先检查divtoshow是否存在，如果不存在，则追加它，即
if($("#divtoshow").length==0){
$("#popupContact").append('<div id="divtoshow" style="display:block;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;">'+
'dsfdssd <div><a href="#">rahul</a></div>'+
'</div>')
}
// css statements will come here页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3965562
复制相关文章
相似问题
腾讯云开发者
