CSS-Werte mit jQuery nur temporär manipulieren

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

xSTVNx

Mitglied
23 September 2012
83
0
6
Ich habe einen Colorpicker, der folgende Funktionsweise haben soll:
  1. Bei, Hovern einer Farbe, wird dieser in der #ID als fill sowie im body als background gesetzt, aber nur temporär währen man hovert (als Vorschau quasi).
  2. Beim Klicken einer Farbe wird dieser in der #ID als fill gesetzt, dauerhaft.
JavaScript:
$( document ).ready(function() { /* colorpicker */

    $('.colorpicker li').on("mouseover", function() {

        var col     = $(this).attr("data-color");
        var nr         = $(this).attr("data-d-col-nr");
           
        $("body").css("background",col);
        $("#a"+nr).css("fill",col);

    });  
   
    $('.colorpicker li').on("click", function() {

        var col     = $(this).attr("data-color");
        var nr         = $(this).attr("data-d-col-nr");
           
        $("#a"+nr).css("fill",col);

    });
   
});
Jetzt ist aber das Problem, dass
  1. die durch den Mouseover veränderte Hintergrundfarbe stehen bleibt
  2. die Fill-Farbe des #-Elements ebenfalls stehen bleibt (obwohl ja vllt garnicht geklickt wurde)
Mir ist bewusst dass ich das theoretisch irgendwie mit onmouseout regeln könnte, aber da dies in meinem Falle etwas ungünstig, sodass ich gerne wissen möchte, ob es vielleicht nicht doch eine Möglichkeit gibt im JS/jQuery-Code direkt anzugeben, dass es nicht wirklich fest gesetzt werden soll?

Danke und LG
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.069
210
63
18
Da du jQuery benutzt, würde sich hier noch die hover() Methode anbieten. Der Syntax ist ganz einfach:
JavaScript:
$(selector).hover(Function_in, Function_out);
Für mehr Infos plus Beispiel, klick hier.
Es würde mich allerdings auch mal interessieren, warum onmouseout ungünstig ist, zumal hover() auch nichts anderes macht, mit Ausnahme vom Syntax.
 
Reactions: xSTVNx

xSTVNx

Mitglied
23 September 2012
83
0
6
Ich denke, mouseout wäre schon der richtige Weg. Warum meinst Du denn, dass das ungünstig ist?
Ich hatte einen Denkfehler. Mein background setzte sich eigtl. aus einem background-image (ein SVG-Muster) und einer background-color zusammen, um beim Hovern wollte ich background (einfarbig, keine Muster) ändern, und beim onmouseout hätte ich dann im JS-Code diese ewiglange background-image-Anweisung ebenfalls reinschreiben müssen, was für die Wartung (wenns mans mal ändern will) wieder ein doch zu vermeidender Aufwand gewesen wäre.

Dass das sowieso Quatsch war, weil ich mir den Wert ja auch einfach via JS in eine Variable hätte holen können, ist mir nun auch klar. War halt noch Morgens. (Und JS ist mir noch lang nicht in Fleisch und Blut übergegangen.) :p

Es würde mich allerdings auch mal interessieren, warum onmouseout ungünstig ist, zumal hover() auch nichts anderes macht, mit Ausnahme vom Syntax.
Danke, diese Methode war mir tatsächlich noch unbekannt!

Dass sie sich die Methode von onmouseout außer vom Syntax nicht unterscheidet, spricht dann eigentlich dafür, dass sie nicht das war, wonach ich gesucht habe. :p Aber dass lag nun auch wieder an einem Denkfehler meinerseits: Ich suchte nach einer JS-Methode, die einen Wert quasi nur im hover-Zustand setzt, dann aber bei Beendigung des Zustandes quasi wie von Zauberhand ohne zusätzlichen Code die alten Werte wieder zuweist, was ja nun schlichtweg Quatsch ist. o_O

Da du jQuery benutzt, würde sich hier noch die hover() Methode anbieten. Der Syntax ist ganz einfach:
JavaScript:
$(selector).hover(Function_in, Function_out);
Für mehr Infos plus Beispiel, klick hier.
Ich hatte kurz nach Erstellung dieses Theads es doch noch schnell (musste eigtl. weg) mit ommouseout versucht, allerdings bin ich gescheitert... und nun habe ich wohl bei hover schlicht das selbe Problem.

Hier erstmal mein Code:

JavaScript:
$( document ).ready(function() { /* colorpicker */

    $( ".colorpicker li" ).hover(
   
    function(){
       
        var col2     = $(this).attr("data-color");
        var nr         = $(this).attr("data-d-col-nr");
   
        $("body").css("background-color",col2);
        $("#a"+nr).css("fill",col2);
       
    }, function(){
       
        var bg_c    = $("body").css("background-color");
        var nr         = $(this).attr("data-d-col-nr");   
        var fill    = $("#a"+nr).css("fill");
       
        $("body").css("background-color",bg_c);
        $("#a"+nr).css("fill",fill);
       
      }
    );
  
   [ ... onclick ... ]
   
});
Der Status Quo sieht nun so aus, dass beim Hovern zwar background-color und fill jeweils korrekt gesetzt werden, diese beim Verlassen aber nicht wieder die vorherigen Werte annehmen.

Mir ist schon klar, dass es schlicht daran liegt, dass in der zweiten Funktion der hover()-Methode die Variablen die (neugesetzten) Werte im Zeitpunkt des Hoverns bekommen. Allerdings scheitere ich nun aber beim Versuch die korrekten Werte für die benötigten Variablen zu setzen.

Ich versuchte es so:

JavaScript:
$( document ).ready(function() { /* colorpicker */
  
var col2     = $(this).attr("data-color");
var nr         = $(this).attr("data-d-col-nr");
var bg_c    = $("body").css("background-color");
var fill    = $("#a"+nr).css("fill");
  
    $( ".colorpicker li" ).hover(

        function(){
           
            $("body").css("background-color",col2);
            $("#a"+nr).css("fill",col2);
           
        }, function(){
           
            $("body").css("background-color",bg_c);
            $("#a"+nr).css("fill",fill);
           
          }
        );
   
    [ ... onclick ... ]
   
});
... und die Variablen in der Funktion zu übergeben ...

JavaScript:
$( document ).ready(function() { /* colorpicker */

var col2     = $(this).attr("data-color");
var nr         = $(this).attr("data-d-col-nr");
var bg_c    = $("body").css("background-color");
var fill    = $("#a"+nr).css("fill");

    $( ".colorpicker li" ).hover(

        function( col2 , nr ){
           
            $("body").css("background-color",col2);
            $("#a"+nr).css("fill",col2);
           
        }, function( bg_c , fill, nr ){
           
            $("body").css("background-color",bg_c);
            $("#a"+nr).css("fill",fill);
           
          }
        );
   
    [ ... onclick ... ]
   
});
Und bei beiden zuletzt genannten Varianten passiert dann halt garnichts, also auch das Setzen der neuen Werte im Zustand des Hovern klappt nicht mehr. Wo ist denn mein Denkfehler jetzt? :confused:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.468
294
83
66
Versuche, die originalen Werte in data-Attributen zu speichern, etwa so (ungetestet):
Code:
$( document ).ready(function() { /* colorpicker */
    $( ".colorpicker li" ).hover(
    function(){
        var nr = $(this).attr("data-d-col-nr");
        $(this).data("save-bg-color", $("body").css("background-color"));
        $(this).data("save-fill-" + nr, $("#a"+nr).css("fill"));
   
        var col2     = $(this).attr("data-color");[ICODE][/ICODE]

        $("body").css("background-color",col2);
        $("#a"+nr).css("fill",col2);
   
    }, function(){
        var nr = $(this).attr("data-d-col-nr");
        var savedBgColor = $(this).data("save-bg-color");
        var savedFill = $(this).data("save-fill-" + nr);
        $("body").css("background-color", savedBgColor);
        $("#a"+nr).css("fill", savedFill);
   
      }
    );

   [ ... onclick ... ]

});
Edit: Wahrscheinlich kann man die data-Attribute auch einmalig beim Laden der Seite speichern, aber weil ich den genauen Aufbau nicht kenne (das nr lässt vermuten dass es mehrere Elemente gibt) wusste ich nicht, wie es genau gemacht werden muss.
 
Zuletzt bearbeitet:
Reactions: xSTVNx

basti1012

Aktives Mitglied
26 November 2017
970
102
43
38
Minden
sebastian1012.bplaced.net

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.468
294
83
66
Daran hatte ich auch als erstes gedacht, aber das Problem ist, dass die Farben nicht statisch sind, sondern von einem Colorpicker kommen. Ließe sich vielleicht auch irgendwie machen, wenn man das hover-CSS dynamisch setzt, aber wahrscheinlich auch nicht viel einfacher.
 

xSTVNx

Mitglied
23 September 2012
83
0
6
Wahrscheinlich kann man die data-Attribute auch einmalig beim Laden der Seite speichern, aber weil ich den genauen Aufbau nicht kenne (das nr lässt vermuten dass es mehrere Elemente gibt) wusste ich nicht, wie es genau gemacht werden muss.
Jupp, das werde ich dann zum Schluss (wenn alles funktioniert) auch so machen vermutlich (musste es sogar so machen). :wink:
Das war aber trotzdem sehr gut so, denn mir war bisher unbekannt, dass man neue data-Attribute im JS setzen kann – ich ging bisher immer davon aus, dass man diese vorher im HTML-Code zumindest deklariert haben müsste. :rolleyes:

Zum Code selbst:

Funktioniert(e fast). Und ist eine nachvollziehbare Lösung. Vielen Dank dafür! :smile:

Nun gab es aber noch 2 Probleme, weshalb ich so lange mit der Antworte gebraucht habe, da ich micht nicht einfach zurücklehnen wollte, sondern erstmal selber nachgedachte/rumgefriemelt habe, was soger klappte:

1. Im CSS-Code ist es eine Transition deklariert:

CSS:
* {
    transition:0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition-property: background, border, color, fill, opacity, outline;
}
Es war nun so, dass wen man mit der Maus zu schnell (vermutl. < 0,5s) von li zu li fährt, dass dann quasi die gerade beim Hovern gesetzten Werte stehen bleiben.

Dieses Problem konnte aber dadurch behoben werden,indem die Data-Attribute mit den Ursprungswerten, wie du ja ebenfalls schon anmerktest, bereits im Ursprungs-HTML-Code gesetzt werden. :)

2. Außerdem war es so, dass falls nun ein Klick stattgefunden hat (also eine Farbe nicht nur per Hover previewt wurde), der dadurch gesetzte fill--Wert beim mouseout nun eben wieder vom Ursprungswert überschrieben wurde.

Dies lies sich letztl. schlicht dadurch beheben, dass bei onclick der Wert des data-save-fill-Attributes ebenfalls manipuliert wird.


Abschließend kann ich nur wiedermal VIELEN LIEBEN DANK sagen, denn nun funktioniert alles wie es soll.
 
Werbung: