IE sélectionner le problème avec hover

Un ami et moi-même essayons de contourner IE (7/8). Nous avons construit un exemple canonique ici:IE sélectionner le problème avec hover

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

l'aide d'un menu CSS, nous aimerions avoir dans les sélectionne. Cependant, dans IE, le menu disparaît lorsque vous interagissez avec la zone de sélection. Nous croyons que cela a à voir avec un bug dans la façon dont les sélections affectent les événements.

Y a-t-il une solution de contournement? Au moins avec des hacks CSS ou DOM pur?

Source

2010-09-13 MathGladiator

dont la version IE vous parle? –

principalement 7 et 8 (* edit *) – MathGladiator

Je n'ai vu aucune différence entre IE7 et Chrome –

Je ne pense pas qu'il existe un moyen purement CSS autour de cela. Cela est dû à un bug très commun à la façon dont IE gère les événements sur les éléments sélectionnés.

Vous pouvez cependant travailler autour d'elle avec 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>

Le code ci-dessus utilise jQuery.

Source

2010-09-22 00:45:16 vassilis

Voici un moyen de Améliorant le comportement de sélection dans IE7/8, mais il ne résout pas le problème

changement DOCTYPE

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

Ajouter un script

<script> 

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

</script>

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

Cela fonctionnera mieux au moins, mais bien sûr pas parfait.

Mon conseil est de changer le contrôle de sélection en équivalent html. J'utilise OboutDropDown qui a une belle vue. De nombreuses implémentations peuvent répondre à vos besoins.

Source

2010-09-24 08:03:35

Vous devez d'abord développer la surface: hover sous votre menu.
Donc, dans votre css, ajoutez width:310px;height:220px à #nav .nav_element a.
(ajouter une classe ou un id sur la deuxième div style avec top:220px)

Maintenant, il vous suffit de simuler un mousedown déclenché lorsque vous cliquez sur la sélection qui arrêtera lorsque la sélection entre les options est fait - vous pouvez probablement faire la dernière partie si vous vérifiez l'état onfocus du select qui arrêtera le mousedown.

Source

2010-09-26 03:11:20 Knu

IE sélectionner le problème avec hover

Répondre

Questions connexes