2010-08-30 4 views
2

вот мой полный код, когда я нажимаю на popupcontact div, он показывает divtoshow div над ним, и у него есть одна ссылка на имя rahul, когда я курю ссылка скрывает имя div div. мой div должен скрываться, когда я нажимаю, когда я навешиваю ссылку на ссылку. помогите как можно скорее.Мне нужно остановить 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> 
</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 id="divtoshow" style="display:none;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;"> 
    dsfdssd <div><a href="#">rahul</a></div> 
    </div> 
</body> 
</html> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    var popup_pos=$('#popupContact').offset(); 
    var timer; 
    $("#popupContact").mouseover(function() { 
     if(timer) { 
      clearTimeout(timer); 
      timer = null 
      } 
     timer = setTimeout(function() { 
      console.log($("#VersionSelectField").is(':hidden')); 
      if(!$("#VersionSelectField").is(':hidden')){ 
       $("#divtoshow").css('position',"absolute"); 
       $("#divtoshow").css('top',popup_pos.top-20);  
       $("#divtoshow").css('left',popup_pos.left-20); 
       $("#divtoshow").fadeIn(300); 
       $("#popupContact").hide(); 
      } 

     }, 100); 

     }); 

    $("#divtoshow").mouseout(function() { 
      if(timer) { 
       clearTimeout(timer); 
       timer = null 
       } 
      timer = setTimeout(function() { 
       $("#divtoshow").fadeOut("slow"); 
       $("#popupContact").show(); 

      }, 1000); 
    }); 
}); 
</script> 
+0

Привет, Чак, что вы редактируете? – XMen

ответ

1

Вместо .mouseout() так:

$("#divtoshow").mouseout(function() { 

Использование .mouseleave(), как это:

$("#divtoshow").mouseleave(function() { 

Это не огонь при входе в ребенок el ement вроде mouseout будет, который в настоящее время скрывается, когда вы этого не хотите.


Еще один код наконечник, вы можете по крайней мере, цепь на #divtoshow селектора, или даже лучше, цепи и передать объект .css(), как это:

$("#divtoshow").css({ position: "absolute", 
         top: popup_pos.top-20, 
         left: popup_pos.left-20 }) 
       .fadeIn(300); 

Кроме того, это не является проблемой для ваша разметка, но если у #popupContact был дочерний элемент, у вас были бы аналогичные проблемы с mouseover, что эквивалент не-стрельбы на детей равен mouseenter.

+0

Спасибо Ник это сработало – XMen

+0

@Rahul - Welcome :) Обязательно принимайте ответы, если они разрешают вашу проблему :) –

0

при использовании setTimeout и clearTimeout всегда используйте полный путь к этим функциям, вызывая window.setTimeout и window.clearTimeout.

Я обнаружил, что иногда это не будет работать должным образом в некоторых версиях IE, если вы этого не сделаете.

Смежные вопросы