JQuery - CSS - background-color

[koma05]

hallo.
habe eine seltsames phänomen mit jquery und der css-eigenschaft background-color festgestellt. vielleicht hab ich auch irgendwas übersehen.

css:

    #vorschau3 {
width:30px;
        height:12px;
        background-color: #009f00;
    }
    #vorschau3:hover {
        background-color: #cc0000;
    }

und zwar gibt es 2 eingabefelder wo man hex-farbencodes eingeben kann:

<input type="text" name="back" id="back" value="#ffffff" size="6" maxlength="6" />
<input type="text" name="hover" id="hover" value="#000000" size="6" maxlength="6" />

<div id="vorschau3"></div>

nun wird mittels jquery eine veränderung überwacht (change). ist die anzahl der eingegebenen zeichen = 6, dann ändere die hintergrundfarbe des divs.
(info: hex-wert ist richtig eingegeben z.b. ffffff)

$("#back").change(function() {  
    if (this.value.length == 6) {
        $("#vorschau3").css("background-color", "#" + this.value); 
    }
});

es wird wie gewünscht die hintergrund-farbe geändert. ABER der hovereffekt ist weg. die zu beginn definierte css-eigenschaft ist im eimer

#vorschau3:hover {
        background-color: #cc0000;
    }

an was kann das liegen?
wie kann ich mit jquery die css hover-eigenschaft ändern?

 

[fexx]

AW: JQuery - CSS - background-color

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

so vielleicht?

 

[koma05]

AW: JQuery - CSS - background-color

super seite zum schnellen test!!

aber dort zeigt sich auch der "fehler".

ändere nur mal den wert im ersten feld.
danach gibt es keinen hover-effekt mehr....

 

[fexx]

AW: JQuery - CSS - background-color

Ja, weil jquery einen Inline style setzt ... Setz bei hover einfach die !Important Regel ein - Quick and Dirty ;o)

 

[koma05]

AW: JQuery - CSS - background-color


die lösung kann oft so einfach sein!!
danke .. und nochmals danke für den link!

edit:
zu früh gefreut.
die hover-farbe soll ja auch änderbar sein und gleich neu angezeigt werden. doch da ändert sich nichts.

$("#hover").change(function() {
 
     if (this.value.length == 6) {
         var test = this.value + " !important";
         $("#vorschau3:hover").css("background-color", test);
     }
 });

edit2:
hab mir eine lösung mittels

.hover(function()

gebastelt. morgen dazu mehr. muss los....

 

[sokie]

AW: JQuery - CSS - background-color

nimm statt des div ein a (mit display:block) und selektiere die Eigenschaft, die du manipulierst genau ("#vorschau3:hover" und "#vorschau3:link"), dann klappt das auch (und auch im IE<7)

 

[koma05]

AW: JQuery - CSS - background-color

so geht das irgendwie nicht Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)