JQuery - Ärger mit CSS- (‚display‘) Immobilie

// CSS 
#popupUser{width:180px; height:180px; position:absolute; background:#FFFFFF; border:#000000 2px solid; display:none;} 
.viewUser{width:173px; float:left; padding:10px; margin-left:20px; margin-bottom:20px; border:#000000 1px solid;}  

// HTML + Jquery 
<body> 
    <div class="contenitore"> 
     <script type="text/javascript"> 
      $(document).ready(function() {  
       $(".viewUser") 
        .mousemove(function (e) { 
         if($("#popupUser").css('display')=='none') { 
       $("#popupUser").css({left:e.pageX+15, top:e.pageY -190}).show(); 
          alert("None"); 
         } 
        }) 
        .mouseout(function() { 
        $("#popupUser").hide(); 
       });   
      }); 
     </script>  

     <div class="viewUser"> 
      Content 
     </div> 
    </div> 

    <div id="popupUser">&nbsp;</div> 
</body>

Was ich Aspekt möchte ist, dass, wenn ich auf dem div gehe viewUser mit der Maus, wird die Warnung zeigt (Druck keine). Danach, bis ich das div verlassen habe, darf ich nie wieder eine Warnung sehen (weil die Anzeige Eigenschaft, wenn ich die .show() Funktion aufrufen, sollte als Block eingestellt werden).JQuery - Ärger mit CSS- (‚display‘) Immobilie

Aber das ist nicht passiert: in der Tat einige Zeit (wenn ich immer noch auf die viewUser mit der Maus) Ich sehe die Warnung. Warum dieses Verhalten?

Prost

UPDATE

In der Tat, was ich tun möchte, ist dies: wenn ich auf der Maus gehen in der viewUser div, ich werde einen Ajax-Aufruf an die tun Server, um einige Informationen zu erhalten und an popupUser anhängen. Also, ich werde nicht diese Ajax-Aufruf jedes Mal anrufen i bewegen Sie die Maus auf dem div :)

Quelle

2010-12-21 markzzz

Mit welchem Browser testen Sie? – PseudoNinja

Google Chrome 8.0.xxxxxx – markzzz

Denn wenn das Popup erscheint und die Maus auf sie, die mouseout der .viewUser Feuer und schließt es wieder ..

Wenn Sie das Element verfolgen wollen, dann setzen Sie sie in Bezug auf die Maus.

 $(document).ready(function() {  
      $(".viewUser") 
       .mousemove(function (e) { 
        var $popU = $("#popupUser"); 
        if($popU.css('display')=='none') { 
         $popU.show(); 
        } 
        $popU.css({left:e.clientX+2, top: e.clientY-2}); 
       }) 
       .mouseout(function() { 
       $("#popupUser").hide(); 
      });   
     });

Demo: http://www.jsfiddle.net/gaby/RQhTp/

Die Lösung (nach Kommentaren) ist ein Timeout für die mouseout zu verwenden, so dass der div genug Zeit, um neu zu positionieren hat mich ..

 $(document).ready(function() {  
      $(".viewUser") 
       .mouseenter(function(e){ 
        $("#popupUser").show().css({left:e.clientX+1, top: e.clientY+1}); 
        clearTimeout($(this).data('timeout')); 
       }) 
       .mousemove(function (e) { 
        $("#popupUser").css({left:e.clientX+1, top: e.clientY+1}); 
       }) 
       .mouseleave(function() { 
        $(this).data('timeout', setTimeout(function(){ 
         $("#popupUser").hide(); 
        }, 100)); 

      });   
     });

Demo: http://www.jsfiddle.net/gaby/RQhTp/3/

Quelle

2010-12-21 16:56:41

Ja, aber wenn Sie Ihr Beispiel betrachten, ist das Popup nicht so "flüssig". Scheint, dass es manchmal missbraucht :) Überprüfen Sie zum Beispiel das: http://jsfiddle.net/yEeyV/ ist total flüssig – markzzz

+1 Wirklich nettes Schnipsel, das! –

@markzzz, die Warnung zwingt Sie auch, die Maus zu bewegen und das 'mouseout' Ereignis tritt auf. –

Sie benötigen .mouseover() und nicht .mousemove() - mousemove- Sie ermöglicht in diesem Element jede einzelne Bewegung der Maus zu verfolgen; Mouseover ist nur für den ersten Mauskontakt.

Quelle

2010-12-21 16:49:15

Jetzt brauche ich mousemove(), weil ich einige div anzeigen möchte die Maus :) – markzzz

JQuery - Ärger mit CSS- (‚display‘) Immobilie

Antwort

Verwandte Themen