:hover bei CSS3 Eigenschaft transform

[Paule]

Guten Tag,

beim ausprobieren der neuen Eigenschaft "transfom: rotate()" tritt bei mir folgendes Problem auf. Drehe ich ein Element über diese Methode, kann ich via CSS :hover (also beim überfahren mit der Maus) beispielsweise das Element wieder "gerade" Ausrichten. So weit so gut. Erstelle ich das Element zuvor jedoch erst via JavaScript und definiere auch dort gleich die Transform-methode und hänge den Knoten in die Dom-Struktur, greift mein :hover Effekt plötzlich nicht mehr. Andere zugeordnette CSS Eigenschaften lassen sich via :hover erzielen, daher weiß ich auch das ich das richtige Element anspreche... nur das "gerade" drehen funktioniert nicht.

hier mal kurz ein Auszug der JavaScripterstellung:

  
rahm = document.createElement("div");  
rahm.className = "rahm";  
rahm.style.display = "inline-block";  
rahm.style.WebkitTransform = "rotate("+[b]+"deg)";  
rahm.style['-ms-transform'] = "rotate("+[b]+"deg)";  
rahm.style.MozTransform = "rotate("+[b]+"deg)";  
rahm.style.OTransform = "rotate("+[b]+"deg)";  
rahm.style.transform  = "rotate("+[b]+"deg)";  

was wunderbar funktioniert. Der Wert [b] ist Teil einer Funktion der den Winkel bestimmt.

  
.rahm:hover {  
-webkit-transform: rotate(0deg);  
-moz-transform: rotate(0deg);  
-ms-transform: rotate(0deg);  
-o-transform: rotate(0deg);  
transform: rotate(0deg);  
border:#000 10px solid;  
}  

Der Rahmen des Elementes wird beim überfahren verändert, jedoch ändert sich nichts an der Verdrehung.

Wie gesagt, wird das Element ohne JavaScript erzeugt, also im Vorfeld normal im HTML-Baum platziert, funktioniert es... .

Würde mich freuen wenn mir jemand nen Tipp geben könnte was ich falsch mache..

Gruß
Paule

[Der Martin]

Hallo,

[...] Erstelle ich das Element zuvor jedoch erst via JavaScript und definiere auch dort gleich die Transform-methode und hänge den Knoten in die Dom-Struktur, greift mein :hover Effekt plötzlich nicht mehr.

weil du mit deinem Javascript ungültigen CSS-Code erzeugst, der folglich ignoriert werden muss.

rahm = document.createElement("div");

rahm.className = "rahm";
rahm.style.display = "inline-block";
rahm.style.WebkitTransform = "rotate("+[b]+"deg)";
rahm.style['-ms-transform'] = "rotate("+[b]+"deg)";
rahm.style.MozTransform = "rotate("+[b]+"deg)";
rahm.style.OTransform = "rotate("+[b]+"deg)";
rahm.style.transform  = "rotate("+[b]+"deg)";

  
Ist dir klar, was die eckigen Klammern um [b] bedeuten? Auf die kühne Idee [kam doch heute schon mal jemand](https://forum.selfhtml.org/?t=209063&m=1422458).  
Okay, es war gestern abend.  
  

> ~~~css

.rahm:hover {  

> -webkit-transform: rotate(0deg);  
> -moz-transform: rotate(0deg);  
> -ms-transform: rotate(0deg);  
> -o-transform: rotate(0deg);  
> transform: rotate(0deg);  
> border:#000 10px solid;  
> }

Der Rahmen des Elementes wird beim überfahren verändert, jedoch ändert sich nichts an der Verdrehung.

Stimmt, denn von 0° (die Default-Ausrichtung) auf 0° drehen fällt nicht auf.

Ciao,
 Martin

[Paule]

Hallo Martin

weil du mit deinem Javascript ungültigen CSS-Code erzeugst, der folglich ignoriert werden muss.

da hast du was falsch verstanden... der JavaScript-Code wird nicht ignoriert und 1A umgesetzt, das [b] ist eine Variable einer umschließenden Funktion und wird auch wunderbar umgesetzt. Das Problem war das mit Hover keine "Rückdrehung möglich war, was nun jedoch siehe anderen Eintrag klappt.

Gruß
Paule

[Paule]

  
.rahm:hover {  
	-webkit-transform: none !important;  
	-ms-transform: none !important;  
	-moz-transform: none !important;  
	-o-transform: none !important;  
	transform: none !important;  
}  

so funtioniert es... wobei mir nicht klar ist warum die Werte als !important deklariert werden müssen.

Gruß
Paule

[MudGuard]

Hi,

rahm.style.WebkitTransform = "rotate("+[b]+"deg)";

Diese CSS-Regeln haben also dieselbe specificity wie wenn sie im HTML als style-Attribut gesetzt wären.

Warum setzt Du die Variable b eigentlich in eckige Klammern? Was ist der Sinn davon? Warum erzeugst Du ein Array-Literal, wenn Du kein Array brauchst?
Das funktioniert nur deshalb "zufällig", weil [b].toString() (oder wie auch immer der Mechanismus heißt, der das Array in einen String umsetzt) die kommaseparierte Liste der Inhalte des Arrays ergibt - bei nur einem Wert ist diese Liste identisch mit dem Wert.

.rahm:hover {

Die specificity dieses Selectors ist niedriger - nichts kommt an die specificity des style-Attributs ran, außer !important.

cu,
Andreas

[molily]

Das funktioniert nur deshalb "zufällig", weil [b].toString() (oder wie auch immer der Mechanismus heißt, der das Array in einen String umsetzt)

Das ist völlig korrekt !

Mathias

[Paule]

Warum setzt Du die Variable b eigentlich in eckige Klammern? Was ist der Sinn davon? Warum erzeugst Du ein Array-Literal, wenn Du kein Array brauchst?
Das funktioniert nur deshalb "zufällig", weil [b].toString() (oder wie auch immer der Mechanismus heißt, der das Array in einen String umsetzt) die kommaseparierte Liste der Inhalte des Arrays ergibt - bei nur einem Wert ist diese Liste identisch mit dem Wert.

Danke für den Hinweis, wurde sofort bereinigt ;)

[Gunnar Bittersmann]

@@Paule:

nuqneH

rahm.style.WebkitTransform = "rotate("+[b]+"deg)";
rahm.style['-ms-transform'] = "rotate("+[b]+"deg)";

Gibt es einen Grund für die unterschiedliche Notation?

Warum nicht rahm.style.MsTransform?

Qapla'

[Paule]

rahm.style['-ms-transform'] = "rotate("+[b]+"deg)";

Gibt es einen Grund für die unterschiedliche Notation?

Ja gibt es, da der IE 9 das nur in obiger Form interpretiert hat

Warum nicht rahm.style.MsTransform?

[Gunnar Bittersmann]

@@Paule:

nuqneH

Ja gibt es, da der IE 9 das nur in obiger Form interpretiert hat

Hm …

Warum nicht rahm.style.MsTransform?

… ah, der '-ms-'-Präfix ist in JavaScipt klein.

rahm.style.msTransform sollte es tun, oder?

Qapla'

[Paule]

… ah, der '-ms-'-Präfix ist in JavaScipt klein.

rahm.style.msTransform sollte es tun, oder?

korrekt... danke... das passt!