Komplexere CSS-Selektoren mit JQuery

TIMS_Ralf

Erfahrenes Mitglied
N abend...

is schon "spät", wahrscheinlich seh ich deswegen den Wald vor lauter Bäumen nicht mehr...
Ich möchte etwas komplexere CSS-Selektoren mit jQuery setzen, z.B..

CSS:
/*  in CSS soweit klar, Auszug:  */
#Nv1 UL LI:HOVER > UL
{
color:red;
display:block;
cursor:url(crs/ovr.cur), pointer;
}

Diese Klassen sollen nun durch JS / jQuery gesetzt werden, eigentlich so:
Code:
$("#Nv1 UL LI:HOVER > UL").css
({
  color: "red",
  display: "block",
  cursor: "url('http://.................../crs/ovr.cur'), pointer"
)};

Irgendwie haut das aber nicht hin.. liegts an den etwas "komplexeren" Selektoren"...?

Danke für Euren Tipp...
Ralf
 
Zuletzt bearbeitet:
Es liegt an dem :hover Event.

Dies kann JQuery nicht als Selektor auswerten.
Eine Alternative wäre mittels JQuery einen Mouseenter und MouseLeave Event zu setzen und dabei die CSS Einstellungen zu ändern.

So z.B.:
Javascript:
$("#Nv1 UL LI UL").on("mouseenter", function( ) {
    $(this).css( { color: "red",
  display: "block",
  cursor: "url('http://.................../crs/ovr.cur'), pointer" } );
});

$("#Nv1 UL LI UL").on("mouseleave", function( ) {
    $(this).css( { color: "black" } );
});

Nur so mal als Frage weshalb willst du die Eigenschaften per JavaScript setzen und nicht direkt über CSS?
 
Hi Merzi86,

okay... alles klar! Vielen Dank ... auch für den Lösungs-Code :) Auf die Ursache wäre ich (heute) nicht mehr gekommen :)
Baue das morgen ein... wird aber funktionieren.

Zu Deiner Frage:
Ich möchte es Kunden erlauben, zwar das Design / CSS zu ändern, aber ohne Gefahr zu laufen, die Funktionalität zu zerstören. Ich überschreibe bzw. ergänze im JS-Code also CSS dort, wo es die Funktionaliät erfordert, nicht aber das Design. Da war mein Beispiel mit "color:red" natürlich deplaziert... :) - sollte nur ein Bsp sein.
Das hat bislang stets funktioniert - allerdings war bislang natürlich kein ":HOVER" drin.

Danke Dir nochmal und Gruß aus dem Harz,
Ralf
 
Zurück