CSS Dropdown-Menü, um bei Mausklick sichtbar zu bleiben

Question

Kann jemand Licht auf die beste Art, dies zu tun, werfen?

Ich habe heute ein CSS-Dropdown-Menü basierend auf dem Sohn von Suckerfish erstellt. Ich möchte es leicht mit JS verbessern, so dass bei Mouseout die <ul>, die bei Mouse Over sichtbar wird, für ein paar Sekunden auf dem Bildschirm bleibt.

Hier ist ein Link auf die Faux Dropdown CSS Menu

http://www.eagleworks.co.uk/test/cssdropdown/

Alle Links oder Ratschläge wäre genial.

Danke alle

Answer 1

Sie können dies tun, indem Sie ein Timeout verwenden.

So etwas wie die folgenden funktionieren soll:

eine globale Variable erstellen: var theTimeout = null;

dann die mouseout ändern und die entsprechenden Maus jeweils den Timeout zu setzen und löschen.

sfEls[i].onmouseover=function() { 
    clearTimeout(theTimeout); 
    this.className+=" sfhover"; 
} 
sfEls[i].onmouseout=function() { 
    var self = this; 
    theTimeout = setTimeout(function(){ 
     self.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
    },2000); 
} 

Wenn Sie mehr als eine dieser Dropdown-Listen auf der Seite haben, dann werden Sie eine Reihe von Timeouts benötigen, damit Sie sie jedes Mal, wenn Sie ein anderes Menü öffnen sich nicht überschreiben.