CSS-Hover funktioniert nicht, nachdem KEYUP-Funktion

ausgeführt wird Ich habe ein Problem. Mein Skript funktioniert perfekt, aber ich verliere den CSS-Hover-Effekt, wenn ich zurück zum Eingabefeld gehe und die darin enthaltenen Daten lösche. Ich sehe den Hover-Effekt nicht mehr.CSS-Hover funktioniert nicht, nachdem KEYUP-Funktion

Vor der Ausführung der Keyup-Funktion funktioniert der Hover-Effekt korrekt, aber nach Ausführung der Keyup-Funktion verliere ich den Schwebeflug nicht mehr WENN ich die Daten im Eingang lösche.

Kann jemand ein Problem oder einen Konflikt und eine mögliche Lösung sehen?

$(document).ready(function(){ 

    $("#r1 input").keyup(function() { 
    if($("#r1 input").val().length > 0) 
    $("#r1 .bx").css("background-color", "#2F2F2F").css("color", "#FFF"); 
    else {if($("#r1 input").val().length == 0) 
    $("#r1 .bx").css("background-color", "#E8E8E8").css("color", "#000"); }}); 
});

Meine CSS:

#r1:hover div.bx, #r1:hover input { background-color: #A9A9A9; cursor:pointer}

Quelle

2012-04-11 Erik

wo ist html pls? Auch funktioniert Ihre Funktion mit id = "r1", während Ihre CSS für id = "r2" ist. – Elen

Schätzen Sie Ihre Hilfe. Können wir uns unterhalten? – Erik

Zeta hat die Antwort für Ihre Situation. Wenn das nicht genug ist - schauen Sie in on() -Funktion, die live Änderungen lauscht – Elen

Stil Tag (Was uses Javascript) immer den Vorzug gegenüber CSS-Regeln, einschließlich: schweben; Sie können den gewünschten Effekt auf diese Weise erhalten:

$(document).ready(function(){ 

    $("#r1 input").keyup(function() { 
    if($("#r1 input").val().length > 0) 
    $("#r1 .bx").css("background-color", "#2F2F2F").css("color", "#FFF"); 
    else { 
    $("#r1 .bx").removeAttr("style"); }}); 
});

Oder Sie können es besser machen mit Klassen

$(document).ready(function(){ 

    $("#r1 input").keyup(function() { 
    if($("#r1 input").val().length > 0) 
    $("#r1 .bx").addClass("ligth"); 
    else { 
    $("#r1 .bx").removeClass("ligth"); 
}});

Quelle

2012-04-11 17:05:27

Ihre Lösung funktioniert, aber die removeAttr oder removeClass entfernt zu viel. Ich verliere alles, Breite, Höhe, etc ... – Erik

Ist es möglich, css Attribute nach dem removeAttr zu reinste? – Erik

@Erik vermeiden Stil Attribute zugunsten von CSS-Klassen. Dann wirst du dieses Problem nicht haben. –

.css() wird Inline-Styling verwenden Sie den Stil Ihrer Elemente zu ändern. Dies verhindert Pseudo-Klassen wie :hover.

Klassen definieren und verwenden .addClass() und .removeClass() statt (JSFiddle):

$(document).ready(function(){ 
    $("#r1 input").keyup(function() { 
    if($("#r1 input").val().length > 0) 
      $("#r1 .bx").removeClass('b').addClass('f'); 
    else {if($("#r1 input").val().length == 0) 
     $("#r1 .bx").removeClass('f').addClass('b');; }}); 
});

#r1:hover div.bx, #r1:hover input { 
    background-color: #A9A9A9; cursor:pointer; 
} 

.f {background-color:#2f2f2f;color:#fff;} 
.b {background-color:#e8e8e8;color:#000;}

Quelle

2012-04-11 17:05:51 Zeta

Ihre CSS-Klasse kann sich auf das Element durch das Vorhandensein von Stilinformationen außer Kraft gesetzt werden wird.

Anstatt direkt Farben in Ihrem keyup, hinzufügen oder eine CSS-Klasse entfernen Angabe:

.hasData {color:#FFF;}

mit dem folgenden:

$(document).ready(function(){ 
    $("#r1 input").keyup(function(ev) { 
     $("#r1 .bx").toggleClass('hasData', !!$(this).val()); 
    }); 
});

Beachten Sie, dass ich bin mit der 'this' von der Event-Handler, anstatt das gesamte Dokument erneut für das Eingabeelement zu durchsuchen, und das Umschalten erfolgt mit der zweiten Signatur von .toggleClass(), nachdem der Wert auf boolean (also, true, wenn nicht leer).

Quelle

2012-04-11 17:07:27

CSS-Hover funktioniert nicht, nachdem KEYUP-Funktion

Antwort

Verwandte Themen