代码之家 › 专栏 › 技术社区 › XMen

为什么要对popup div进行双附加

jquery

XMen · 技术社区 · 15 年前

嗨,我有以下代码

<!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>

问:为什么当我再次鼠标悬停在沙发上时,沙发没有隐藏它。

当做

拉胡尔

3 回复 | 直到 15 年前

jAndy 15 年前

您需要在此处进行一些修改:

将“mouseover”更改为“mouseenter”
使用A .live() 装订 #divtoshow
通过访问事件处理程序中的元素 this

例子: http://www.jsfiddle.net/YjC6y/23/

Chinmayee G 15 年前

您可以通过以下方式删除DivToShow on Mouse Leave事件:

  $("#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

XMen 15 年前

我自己做的,我看到别人的解决方案,他们很好,谢谢他们的回答。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前