IE wählen Problem mit Hover

Ein Freund und ich selbst versuchen, IE (7/8) zu umgehen. Wir bauen haben ein kanonisches Beispiel hier:IE wählen Problem mit Hover

http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm

ein CSS-Menü verwenden, würden wir wählen gerne in ihnen haben. Im IE wird das Menü jedoch deaktiviert, wenn Sie mit der Auswahlbox interagieren. Wir glauben, dass dies mit einem Fehler in der Auswahl von Ereignissen zusammenhängt.

Gibt es eine Problemumgehung? Zumindest mit reinem CSS oder DOM Hacks?

Quelle

2010-09-13 MathGladiator

über welche IE-Version wird gesprochen? –

hauptsächlich 7 und 8 (* edit *) – MathGladiator

Ich sah keinen Unterschied zwischen IE7 und Chrome –

Ich glaube nicht, dass es eine reine CSS-Möglichkeit gibt. Dies ist auf einen sehr häufigen Fehler in der Art zurückzuführen, wie der IE Ereignisse auf ausgewählten Elementen behandelt.

Sie können aber um es mit Javascript arbeiten:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.nav_element a').mouseover(function() { 
      $('.submenu').hide(); 
      $(this).parent().find('.submenu').show(); 
     }); 

     $('.submenu').mouseover(function() { 
      $(this).show(); 
     }); 

     $('.submenu').mouseout(function (e) { 
      // Do not close if going over to a select element 
      if (e.target.tagName.toLowerCase() == 'select') return; 
      $(this).hide(); 
     }); 

    });  
</script>

Der obige Code jQuery verwendet.

Quelle

2010-09-22 00:45:16 vassilis

ist hier eine Weise, wählen Sie Verhalten in IE7/8, Verbesserungsmittel, aber es das Problem

ändern DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

hinzufügen Skript

<script> 

    function ddlOut(e) { 
     setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000) 
    } 

</script>

nicht behoben Hinzufügen css

#nav .over div.submenu 
    { 
     display: block; 
    } 

    #nav .nav_element{ 
     behavior: expression(
      this.onmouseover = new Function("this.className += ' over'"), 
      this.onmouseout = new Function("ddlOut(this)"), 
      this.style.behavior = null 
     ); 
    }

Es funktioniert zumindest besser, aber natürlich nicht perfekt.

Mein Rat ist es, ausgewählte Steuerelement in HTML-Äquivalent zu ändern. Ich benutze OboutDropDown, die eine schöne Aussicht hat. Es gibt viele Implementierungen, die Ihre Anforderungen erfüllen können.

Quelle

2010-09-24 08:03:35

Zuerst müssen Sie die: Hover-Oberfläche unter Ihrem Menü erweitern.
Also in Ihrem css width:310px;height:220px zu #nav .nav_element a hinzufügen.
(fügen Sie auch eine Klasse oder eine ID auf dem zweiten div mit top:220px gestylt)

Jetzt müssen Sie ein gerade simulieren mousedown- ausgelöst, wenn Sie Klick auf der Auswahl der halten werden, wenn die Auswahl zwischen den Optionen ist fertig - Sie können wahrscheinlich den letzten Teil tun, wenn Sie nach dem onfocus Zustand der Auswahl suchen, der den mousedown stoppt.

Quelle

2010-09-26 03:11:20 Knu

Antwort

Verwandte Themen