IE seleziona problema con hover

Un mio amico e io sto provando a risolvere il problema IE (7/8). Abbiamo costruito un esempio canonico qui:IE seleziona problema con hover

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

Utilizzando un menu CSS, vorremmo avere seleziona in loro. Tuttavia, in IE, il menu scompare quando si interagisce con la casella di selezione. Riteniamo che questo abbia a che fare con un errore nel modo in cui seleziona gli eventi influenzali.

C'è una soluzione? Almeno con gli hack CSS o DOM puri?

fonte

2010-09-13 MathGladiator

di quale versione IE si parla? –

principalmente 7 e 8 (* edit *) – MathGladiator

Non ho visto differenze tra IE7 e Chrome –

Non penso che ci sia un modo puro CSS intorno a questo. Ciò è dovuto a un bug molto comune al modo in cui IE gestisce gli eventi su elementi selezionati.

È possibile comunque lavorare intorno ad esso con JavaScript:

<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>

Il codice precedente utilizza jQuery.

fonte

2010-09-22 00:45:16 vassilis

Ecco un modo per miglioratore selezionare il comportamento in IE7/8, ma non risolve il problema

Change DOCTYPE

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

Aggiungere sceneggiatura

<script> 

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

</script>

Aggiungi 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 
     ); 
    }

Funzionerà meglio almeno ma, naturalmente, non perfetto.

Il mio consiglio è di cambiare il controllo di selezione in equivalente html. Io uso OboutDropDown che ha una bella vista. Ci sono molte implementazioni che possono soddisfare le tue esigenze.

fonte

2010-09-24 08:03:35

Per prima cosa è necessario espandere la superficie: al passaggio del mouse sotto il menu.
Quindi nel tuo css aggiungi width:310px;height:220px a #nav .nav_element a.
(aggiungi anche una classe o un id sulla seconda div abbinati a top:220px)

Ora non vi resta che simulare un mousedown innescato quando si click sulla selezionare quale si fermerà quando la selezione tra le opzioni è fatto - probabilmente puoi fare l'ultima parte se controlli lo stato onfocus della selezione che fermerà il mouse.

fonte

2010-09-26 03:11:20 Knu

IE seleziona problema con hover

risposta

Problemi correlati