Mokona: Mouseover bei Dropdown Farbe geben

Guten morgen.

Ich hät da mal ne Frage...
Habe in meiner Seite ein Dropdown. Hintergrundfarbe ist ein Dunkelgelb.
Wie kann ich dem im CSS für onMouseOver/onMouseOut eine Farbe verpassen?
Hab das derzeit so versucht

  
<select>  
<option onMouseOver="this.className='mouseover';" onMouseOut="this.className='mouseout';" value="">Bitte wählen</option>  
</select>  

Irgendwie funktioniert das nicht...
Kann mir da vL jemand weiterhelfen?

LG

  1. Mahlzeit Mokona,

    Habe in meiner Seite ein Dropdown.

    Du meinst eine http://de.selfhtml.org/html/formulare/auswahl.htm#listen@title=Auswahlliste (AKA "Selectbox")?

    Wie kann ich dem im CSS für onMouseOver/onMouseOut eine Farbe verpassen?

    "onMouseOver" und "onMouseOut" kennt CSS nicht, da es mit Eventhandling nichts am Hut hat. Vernünftige Browser unterstützen aber die Pseudoklasse "http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover".

    <select>
    <option onMouseOver="this.className='mouseover';" onMouseOut="this.className='mouseout';" value="">Bitte wählen</option>
    </select>

    
    >   
    > Irgendwie funktioniert das nicht...  
      
    Natürlich nicht. Du weist dem <option>-Element je nach Mausbewegung unterschiedliche Klassen zu. Und dann? Hast Du für diese Klassen unterschiedliche Formatierungen (z.B. Farbangaben) festgelegt?  
      
      
    MfG,  
    EKKi  
    
    -- 
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    
    1. Habe in meiner Seite ein Dropdown.

      Du meinst eine http://de.selfhtml.org/html/formulare/auswahl.htm#listen@title=Auswahlliste (AKA "Selectbox")?

      jep sowas.. Nur das halt eine Zeile is und zum Aufklappen..

      "onMouseOver" und "onMouseOut" kennt CSS nicht, da es mit Eventhandling nichts am Hut hat. Vernünftige Browser unterstützen aber die Pseudoklasse "http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover".

      Und wie kann ich dieses hover einbinden?!

      Natürlich nicht. Du weist dem <option>-Element je nach Mausbewegung unterschiedliche Klassen zu. Und dann? Hast Du für diese Klassen unterschiedliche Formatierungen (z.B. Farbangaben) festgelegt?

      Ja. Mouseover hat ein helles Gelb und MouseOut die ursprüngliche Farbe (Dunkelgelb).

      1. Hi,

        Vernünftige Browser unterstützen aber die Pseudoklasse "http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover".
        Und wie kann ich dieses hover einbinden?!

        In dem du mal an der verlinkten Stelle nachliest ...?

        Und im Grundlagenkapitel "darueber" auch noch, wenn du im Umgang mit CSS noch ungeuebt bist.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
      2. Mahlzeit Mokona,

        Vernünftige Browser unterstützen aber die Pseudoklasse "http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover".
        Und wie kann ich dieses hover einbinden?!

        Ich hatte es Dir extra verlinkt. Hast Du Dir den entsprechenden Teil von "SELF"HTML durchgelesen? Welches konkrete Problem hast Du?

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        1. ich weiß was :hover macht...
          ich habe im CSS select:hover probiert und option:hover
          und es funktioniert beides nicht

          sorry, falls ich vorhin meine Frage falsch formuliert habe.

          Und wie kann ich dieses hover einbinden?!

          LG

          1. Mahlzeit Mokona,

            ich habe im CSS select:hover probiert und option:hover

            Was meinst Du mit "ich habe [...] probiert"? Zeige doch bitte mal aussagekräftigen Quellcode oder stelle ein Beispiel online zur Verfügung ... Glaskugeln sind grad aus. Kommen auch nicht wieder rein.

            und es funktioniert beides nicht

            "Funktioniert nicht" funktioniert nicht - woher sollen Deine Leser wissen, was Du gemacht hast und wie sich das Ergebnis Deines Tuns auf Deinem Rechner darstellt? Hilf denen, die Dir helfen wollen ... oder hilf Dir selbst: keine Arme - keine Kekse.

            MfG,
            EKKi

            --
            sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
            1.   
              option:hover{  
                 background-color:#FFFFCC;  
              }  
                
              select:hover{  
                 background-color:#FFFFCC;  
              }  
              
              

              bei dem option:hover passiert rein garnichts
              und bei dem select:hover passiert nur im Firefox etwas. Und zwar wird die komplette Liste hellgelb, wenn ich mit dem Cursor darüberfahre.

              LG

              1. bei dem option:hover passiert rein garnichts
                und bei dem select:hover passiert nur im Firefox etwas. Und zwar wird die komplette Liste hellgelb, wenn ich mit dem Cursor darüberfahre.

                hi,

                browserabhängige Darstellungsfehler (z.B. Firefox stellt es korrekt dar, IE aber nicht) sind oft ein Problem von invalidem Code, bitte das auch mal überprüfen

                Gruß mk

              2. Mahlzeit Mokona,

                bei dem option:hover passiert rein garnichts

                "<http://de.selfhtml.org/html/formulare/formatieren.htm@title=Welche Gestaltungsmöglichkeiten funktionieren, ist jedoch noch ein Glücksspiel. Diejenigen Browser, die das Formatieren von Formularelementen mit CSS unterstützen, unterstützen es noch nicht konsequent. Ausprobieren ist also angesagt.>"

                und bei dem select:hover passiert nur im Firefox etwas.

                Im Vergleich zu welchem Browser? Hattest Du das "<http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Beachten Sie>" gelesen?

                Und zwar wird die komplette Liste hellgelb, wenn ich mit dem Cursor darüberfahre.

                Works as designed.

                MfG,
                EKKi

                --
                sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|