Wie onMouseOut verhindern, wenn Focus auf Inputfeld ist

[:: RK ::]

hi,

ich arbeite gerade an einer Navigation die anfangs nur teilweise sichtbar ist.
Fährt man mit der Mouse über den Navigationsbereich, wird die ganze
Navigation eingeblendet. Nehm ich die Mouse von der Navigation weg, dann
wird sie wieder ausgeblendet. Läuft soweit wie gewünscht.

In der Navigation gibt es nun einen Loginbereich (Name, Passwort, Submitbutton).

Wie kann ich nun das Ausblenden verhindern, wenn der Cursor in einem der
Inputfelder ist? Ich geb also meine Zugangsdaten eine und hab z.B. aus
Versehen die Mouse wegbewegt, dann verschwindet die Navigation natürlich.
Das möchte ich unterbinden, aber wie?

Ich habs mit jQuery gelöst. Hier ein Beispiel:

PHP-Code:

var topNav = (function() {
    
    var topnav = $('#topnav'),
        page = $('.page', topnav),
        hlist = $('.hlist', page),
        hlist_height = Math.ceil(hlist.height());

    // Hover Effect
    topnav.hoverIntent(
      function(){ // <-- Das passiert bei MouseOver
        page.animate({
          height: hlist_height,
        }, {duration: 300, queue: false, 'easing': 'easeOutQuint'});
      },
      function(){ // <-- und das bei MouseOut
        page.animate({
         height: 27,
        }, {duration: 450, queue: false, 'easing': 'easeOutQuint'});
      }
    );
    
  })(); 


Bei "onMouseOut" muss ich irgendwie ne Abfrage reinbasteln aber ich kriegs
net gebacken.

Danke für jede hilfreiche Antwort

[bobby]

Schau mal hier, das script findet sich im Quellcode
fixOnMouseOut Test

[:: RK ::]

Zitat von bobby

Schau mal hier, das script findet sich im Quellcode
fixOnMouseOut Test

Danke für den Link .

Ich check leider nicht ganz wie mir das weiterhelfen soll?

Wie kann ich damit abfragen wer gerade den Focus hat und darauf bestimmte
Events "anhalten" und wieder "starten"?

Ich versuch gerade folgenden Ansatz, was schon ganz gut funktioniert aber einen "Schönheitsfehler" hat:

PHP-Code:

    function handlerMouseEnterEvent(){
      page.animate(
        {height: hlist_height},
        {duration: 300, queue: false, 'easing': 'easeOutQuint'}
      );
    }
    
    function handlerMouseLeaveEvent(){
     page.animate(
       {height: 27},
       {duration: 450, queue: false, 'easing': 'easeOutQuint'}
     );
    }
    
    topnav.bind('mouseenter', handlerMouseEnterEvent);
    topnav.bind('mouseleave', handlerMouseLeaveEvent);
    
    inputfields.each(function(){
      
      $(this).focus(function(){
        topnav.unbind('mouseleave');
      });
      
      $(this).blur(function(){
        topnav.bind('mouseleave', handlerMouseLeaveEvent);
      });
      
    }); 


Im oberen Code hatte ich die beiden Events "mouseenter" und "mouseleave" in
der Funktion "hoverIntent" vereint (hoverIntent jQuery Plug-in).

Das hatte die Aufgabe die Events nicht sofort abzufeuern, sondern darauf zu
warten, ob die Mouse auch in dem jeweiligen Bereich stehen bleibt. Das kann
ich jetzt aber nicht mehr nutzen!

Wie kann ich wieder so einen "delay" einbauen?

[:: RK ::]

Mein Problem hat sich erledigt

Wer wissen will wie: hier meine Lösung:

PHP-Code:

var topNav = (function() {
  
  var topnav = $('#topnav'),
      page = $('.page', topnav),
      hlist = $('.hlist', page),
      hlist_height = Math.ceil(hlist.height()),
      inputfields = $('input.text', hlist);
  
  // MouseOver Eventhandler
  function handlerMouseEnterEvent(){
    
    clearTimeout($(this).data('timeout'));
    
    $(this).data('timeout', setTimeout( function () {  
      page.animate(
        {height: hlist_height},
        {duration: 300, queue: false, 'easing': 'easeOutQuint'}
      );
    }, 250));
    
  }
  
  // MouseOut Eventhandler
  function handlerMouseLeaveEvent(){
    
    clearTimeout($(this).data('timeout'));
    
    $(this).data('timeout', setTimeout( function () {
      page.animate(
        {height: 27},
        {duration: 450, queue: false, 'easing': 'easeOutQuint'}
      );
    }, 350));
    
  }
  
  // Eventhandler an topnav binden
  topnav.bind('mouseenter', handlerMouseEnterEvent);
  topnav.bind('mouseleave', handlerMouseLeaveEvent);
  
  // Falls Focus auf eines der Inputfelder liegt, Eventhandler für MouseOut lösen
  // Falls Focus verloren geht, Eventhandler wieder anbinden
  inputfields.each(function(){
    
    $(this).focus(function(){
      topnav.unbind('mouseleave');
    });
    
    $(this).blur(function(){
      topnav.bind('mouseleave', handlerMouseLeaveEvent);
    });
    
  });
  
})();