Cto. 3.5.8 / Isotope 2.3 - mangelnde Event-Unterstützung im IE

Etwas out of topic, weil´s im Grunde eigentlich eher Javascript (jQuery) betrifft als unmittelbar Isotope, habe ich eine ziemlich spezielle Frage ...

Für den Relaunch einer Webseite erstellte ich einen Produktkonfigurator. Dieser erlaubt die Auswahl diverser Produktvariantenattribute über ein Formular (Produktleser-Template), welches entsprechende abhängige Selects- und Radiobuttons enthält. Der Konfigurator an sich ist bereits fertiggestellt und läuft perfekt.

Bei Änderung von Werten werden u. a. mit position:absolute und z-index im Bildcontainer Image-Layer über dem Produktfoto dynamisch eingeblendet. Diese Layer sind mittels Alpa-Kanal mit Transparenzen ausgestattet und ergänzen das Hauptfoto um Dekor-Elemente und Anbauteile. Auch die Hauptebene wechselt zwischen Entsprechungen in versch. Farben.


Das Problem bereiten die Selectboxen im Internet Explorer, weil die Optionen dort keinenEvent bei hover, mouseover feuern. Der Firefox macht es wunderbar und blendet die Fotolayer zu den Select-Optionen sofort bei hover ein und der IE leider erst nach Klick. Hinzu kommt, der Firefox markiert Optionen bereits temporär als selected, solange sich die Maus über einer Option befindet. Entsprechend dieser Logik tut dies der IE natürlich auch nicht. Mithilfe eines kleinen CSS-Tricks (Browserhacks funktionieren ja ansonsten ab Vers. 10 mit dem IE nicht mehr) konnte ich das widerspenstige Teil immerhin dazu bringen, beim Überfahren der Optionen mit der Maus u. a. die gewünschte Hover-Farbe anzuzeigen. Also scheint der IE das Event ja irgendwie trotzdem zu bemerken - nur dass ich es halt nicht zur weiteren Verarbeitung abfangen kann.
CSS-Code:

Code:

---

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* spezifische Selektoren für IE Vers. >= 10 */
  .formbody option{
        background:#fff;
    font-family:"Open Sans",Georgia,serif;
    font-size: 15px;
  }
  option:hover, option:focus, option:active {
    background: #92ba19;
    color:#fff;
  }
  option:checked {
    color: #969696;
    background: #fff;
  }
}

---

Der Wechsel der Hintergrundfarbe bei :hover ist also in gewisser Weise auch im IE eine dynamische Veränderung. Aber feuert natürlich keinen entsprechenden Event. :-( Mein Gedanke ist nun, könnte ich anstelle von :hover irgendwie dieses Farbwechsel-Ereignis registrieren, ließe sich daran hängend die Option als selected setzen und so das Verhalten des Firefox simulieren, hoffe ich wenigstens. Daran angeknüpft wechsele ich übrigens das zugehörige Layerbild im jeweiligen z-index-Container mittels .attr - klappt im IE leider erst nach Klick.


Dummerweise gelang es mir bisher auf keine versuchte Weise, den Wechsel der Hintergrundfarbe einer Option abzufangen. Meine Frage nun - lässt sich dies vielleicht dennoch irgendwie bewerkstelligen? Im Layout der Isotope-Seiten wird sowohl jQuery wie auch MooTools geladen.


Die Konfigurator-Funktionen schränkt es ja nicht ein, lediglich ein Benutzungskomfortmerkmal. Es vielleicht dennoch hinzubekommen, mithin eher eine "sportliche" Herausforderung und wäre vllt. auch mal für andere Cto-User von Belang, die von der diesbzgl. mangelnden Unterstützung des IE genervt sind. Im foreach des Reader-Templates um den HTML-Code der Option-Tags ein Span-Tag mit Klasse zu legen, brachte auch nichts - egal ob um <option>...</option oder um den Optionstext. Laut W3C ja beim Option-Tag legitim. Trotz z-index nicht ansprechbar. Die Browser ignorieren es einfach komplett, nichtmal Firebug zeigt diese Elemente an. Man sieht das Vorhandensein nur in der normalen HTML-Quellcodeansicht.


Danke für´s Lesen!