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.)
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.
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.
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?
