JQuery / Javascript: IE Hover nicht Auswahlbox Optionen abdecken?

Question

Ich habe dieses Stück Skript ein Textfeld mit der Maus darüber zu erweitern und sie auf Mouse-off verkürzen.

Das Problem, das ich habe, ist, dass das Internet Explorer ist es schwebt über die Möglichkeiten einer Auswahlbox zu erweitern scheint nicht.

Das bedeutet, in IE kann ich die wählen klicken, haben unten die Optionen fallen, aber wenn ich versuche, einen auszuwählen, sie verschwinden und die Auswahlbox Wieder Größen, sobald ich die Auswahlbox selbst losfahren.

Beispielcode:

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

Und:

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

Gibt es Abhilfen für Auswahlbox in IE? Ich würde sogar einen jquery Ersatz prüfen, ob jemand kann man empfehlen, die wirklich zuverlässig ist.

Danke!

Answer 1

Offenbar IE berücksichtigt nicht die Drop-down-Bit-Teil des Auswahlelementes. Es ist machbar, aber es dauert ein bisschen Betrug mit expando Eigenschaften und Unschärfe / Fokus-Ereignissen des ‚verstecken‘ Effekt zu aktivieren und zu deaktivieren, ihn zu stoppen in treten, wenn die Maus auf den Dropdown-Teil des Elements eintritt.

Haben Sie gehen mit diesem:

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

(Entschuldigt, wenn dies nicht der Fall ist, wie man soll jQuery verwenden - ich habe es nie benutzt vor:))

Answer 2

Sieht aus wie dieser Beitrag wird für eine Weile, aber hoffentlich gibt es noch interessierte Leute in diesem Problem zu umgehen. Ich erleben dieses Problem, während eine neue Website bauen, die ich gerade arbeite. eine große Informationsblase erscheint mit Informationen über das Produkt, eine Dropdown-Liste Kaufoptionen auszuwählen, und eine Kauftaste auf es ist ein Produkt, Schieber, und für jedes Produkt, über das Produkt mousing. Ich entdecken schnell, dass jederzeit meine Maus, um den anfänglichen sichtbaren Bereich des Auswahlmenüs links (das heißt, versuchen, eine Option zu wählen), die gesamte Blase verschwinden würde.

Die Antwort (danke, intelligent Leute, die jQuery entwickelt), war alles über Ereignis sprudeln. Ich wusste, dass der direkteste Weg, um das Problem zu beheben, musste vorübergehend sein „deaktivieren“, um den klappten Zustand des schweben. Glücklicherweise hat jQuery Funktionalität eingebaut mit Fall beschäftigen sprudelnden (sie nennen es Ausbreitung).

Im Grunde genommen nur um eine Linie oder so von neuem Code, ich angebracht, ein Verfahren zum „OnMouseLeave“ Ereignisse des Drop-Down (über eine der Optionen in der Auswahlliste mousing scheint dieses Ereignis zuverlässig auszulösen - Ich hat versucht, ein wenige andere Ereignisse, aber dies schienen ziemlich solide zu sein), die Ereignispropagierung ausgeschaltet (dh übergeordnete Elemente nicht erlaubt waren, über das „OnMouseLeave“ Ereignis aus dem Drop-Down zu hören).

Das war es! Lösung war viel eleganter, dass ich erwartet, dass es zu sein. Wenn dann die Maus, um die Blase verlässt, löst der klappten Zustand des Hover normal und die Seite geht über sein Geschäft auf. Hier ist das Update (Ich habe es in der document.ready):

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

Answer 3

WorldWideWeb Antwort funktionierte perfekt.

ich ein slighty anderes Problem hatte, hatte ich einen Hover-Effekt auf dem Aufnahmepunkt (Hover ein Auswahlmenü zum ausklappen) des Formularfeldes und auf IE-Benutzer nicht nach unten aus dem Drop holen konnte (es hielt den Wert zurückzusetzen) . Ich WorldWideWeb Vorschlag hinzugefügt (mit der ID des Select) und Viola, es funktionierte.

Hier ist, was ich getan habe:

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

Answer 4

hatte ich eine Form, die versteckt / angezeigt wurde basierend auf schweben. Wenn der Benutzer auf der Auswahl Form fokussiert wurde versteckt. Ich konnte mein Problem mit so etwas wie diesem lösen:

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

Answer 5

das gleiche Problem hat, und WorldWidewebb Antwort funktionierte sehr gut auf IE8. Ich habe gerade eine geringfügige Änderung „die Option“ von der Auswahl zu entfernen, da ich die Auswahlbox Klasse im Selektor enthalten. Machte es eine wirklich einfache Lösung.

Auch ich hatte es in einem Menü implementiert, die das hoverIntent jquery Plugin verwendet, ohne Probleme. (Keine Störung).