彈出的div爲什麼雙追加

您好我有下面的代碼彈出的div爲什麼雙追加

<!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不是隱藏它隱藏當我再次將鼠標放置到它。

問候

拉胡爾

來源

2010-10-19 XMen

我我自己做過，我已經看到其他人的解決方案，他們很好，謝謝他們的回答。

來源

2010-10-19 11:49:31 XMen

要麼你可以通過

$("#divtoshow").remove();

或者對鼠標popupContact格，divtoshow的第一次檢查存在的情況下刪除當鼠標離開事件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

來源

2010-10-19 05:32:00

您需要一些修改蒸發散有：

變化 '鼠標懸停' 到 '的mouseenter'
使用.live()經由this

實施例事件處理程序的內#divtoshow

接入元件結合：http://www.jsfiddle.net/YjC6y/23/

來源

2010-10-19 05:36:38 jAndy

我已經更新了http://www.jsfiddle.net/YjC6y/23/ – XMen 2010-10-19 07:03:19

爲什麼div div不會隱藏，而mouseleave – XMen 2010-10-19 07:03:53

它隱藏時，我再次採取mouseover它， – XMen 2010-10-19 07:04:17

彈出的div爲什麼雙追加

回答

相關問題