✔ XUL CSS Problem mit Mouseover

[SCIPIO-AEMILIANUS]

Nabend,

ich schreib momentan an einer Extension für Firefox und arbeite momentan an einer kleinen Mouseover realisiert mit Javascript. Ich hoffe mal, dass ich hier das richtige Forum getroffen hab.

Der Part in der XUL Datei:

<box width="120" height="120" class="container">
    <image class="previewImage" src="chrome://test/skin/test.jpg"/>
    <image class="previewImageLayer" src="chrome://test/skin/5AT.png"/>
  </box>

box.container {
    width:120px;
    width:120px;
    border:3px solid white;
    overflow:hidden;
    cursor:pointer;
}
box.container:hover {
    width:120px;
    width:120px;
    border:3px solid red;
    overflow:hidden;
}
box.container image.previewImage {
    width:120px;
    height:120px;
    z-index:20;
}
box.container image.previewImageLayer {
    width:120px;
    height:120px;
    margin-left:-120px;
    z-index:30;
    background-color:none;
}
box.container:hover image.previewImageLayer{
    width:120px;
    height:120px;
    margin-left:-120px;
    background-color:#b0c4de;
    z-index:30;
}

Jetzt ist es so, dass beim MouseOver die Border von der Klasse container rot wird, sobald man ein MouseOver durchführt. Jedoch ändert sich nicht die Hintergrundfarbe von image.previewImageLayer.
Generell werden diese Elemente nicht erreicht vom Stylesheet. Wo liegt mein Fehler?

 

[SpiceLab]

Jedoch ändert sich nicht die Hintergrundfarbe von image.previewImageLayer.
Generell werden diese Elemente nicht erreicht vom Stylesheet. Wo liegt mein Fehler?

Selektortechnisch (box.container:hover image.previewImageLayer {}) existiert dort kein Fehler, denn das Element wird sehr wohl erreicht, wenn du probehalber mal in diesem Regelblock die margin-left:-120px-Regel in margin-left:0 wandelst, oder eine Rahmendefinition hinzufügst.

Vermutlich wird die Hintergrundfarbe vom nicht-transparenten "Grafikmotiv" verdeckt ;-)

z-index bleibt übrigens wirkungslos, wenn daneben mittels position keine Angabe zur Positionierungsart deklariert wird: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index

 

[SCIPIO-AEMILIANUS]

Okay, wird sie erreicht, aber die Grafik ist Transparent Es ist ein png mit Alpha-Kanal.
Siehe:
Ohne Mouseover:

Mit Mouseover:


Hierbei ist das 5a der Layer und die Qualle das normale Bild.

 

[hela]

Hallo,

"none" ist kein gültiger Wert für die background-color-Eigenschaft. Ich würde das einfach mal weglassen, vielleicht ändert das was in der Darstellung.

 

[SCIPIO-AEMILIANUS]

So, ich hab nochmal bisschen rumexperimentiert. SO sieht es es jetzt aus:

<box width="120" height="120" class="container">
    <image class="previewImage" src="chrome://test/skin/test.jpg"/>
    <image class="previewImageLayer" src="chrome://test/skin/5AT.png"/>
  </box>
    <image id="imgTest" src="chrome://test/skin/5AT.png"/>

box.container {
    width:120px;
    width:120px;
    border:3px solid white;
    overflow:hidden;
    cursor:pointer;
}
box.container:hover {
    width:120px;
    width:120px;
    border:3px solid red;
    overflow:hidden;
}
.previewImage {
    width:120px;
    height:60px;
    z-index:20;
}
.previewImageLayer {
    width:120px;
    height:90px;
    margin-left:-120px;
    background-color:red;
}
.previewImageLayer:hover{
    width:120px;
    height:120px;
    margin-left:-120px;
    background-color:#b0c4de;
}
#imgTest{
  background-color:red;
  border:3px solid white;
}

Bei dem Image mit der ID imgTest wird das Stylesheet richtig angewendet.
Jedoch das Bild mit der Klasse previewImageLayer wird überhaupt nicht erreicht. Siehe:


Solangsam gehen mir die Ideen aus.

 

[SpiceLab]

Mit einer flux erzeugten PNG-Grafik, die einen transparenten Bereich enthält, um den Blick auf das darunter befindliche Motiv freizugeben, kann ich mit keinem deiner beiden CSS-Codes im FF ein Problem bzgl. der :hover-Hintergrundfarbe registrieren.

Vielleicht ist ja bei dir eine korrekt angewandte Schichtpositionierung der beiden <image>-Elemente hilfreich.

.previewImage {
    width:120px;
    height:60px;
    z-index:20;
    position:relative; /* damit z-index Wirkung zeigt */
}
.previewImageLayer {
    width:120px;
    height:90px;
    margin-left:-120px;
    background-color:red;
    z-index:21; /* liegt eine Ebene über previewImage */
    position:relative; /* damit z-index Wirkung zeigt */
}

 

[SCIPIO-AEMILIANUS]

Also ich hab das von dir jetzt noch nicht weiter ausprobiert, grad keine Zeit
Ich hab aber wohl nen Bug oder so gefunden bei Gecko. Wenn 2 Image Tags übereinander/nebeneinander liegen oder den selben Parent haben (so genau jetzt nicht getestet) scheint das hover nicht zu reagieren. Ich habs jetzt so gelöst:

<box class="container">
    <image class="previewImageLayer" src="chrome://test/skin/5AT.png"/>
  </box>

box.container {
    width:120px;
    width:120px;
    border:3px solid white;
    overflow:hidden;
    cursor:pointer;
    -moz-background-size:120px,120px;
    background-size:120px,120px;
    background-image:url("chrome://test/skin/test.jpg");
}
box.container image.previewImageLayer {
    width:120px;
    height:120px;
    margin-left:0px;
    background-color:transparent;
}
box.container image.previewImageLayer:hover{
    width:120px;
    height:120px;
    margin-left:0px;
    background-color:transparent;
    background-image:url("chrome://test/skin/mOver.png");
}

So funktioniert es jetzt.

 

[SpiceLab]

Also ich hab das von dir jetzt noch nicht weiter ausprobiert, grad keine Zeit

Auch nicht später? Bei so viel Wertschätzung könnt' man vor lauter Verlegenheit im Boden versinken

Ich hab aber wohl nen Bug oder so gefunden bei Gecko. Wenn 2 Image Tags übereinander/nebeneinander liegen oder den selben Parent haben (so genau jetzt nicht getestet) scheint das hover nicht zu reagieren.

Interessant, dass FF bei dieser Konstellation zweier übereinander befindlichen Bilderelementen mit diesem Bug fein säuberlich zwischen dem <img>- und <image>-Tag unterscheidet, denn in HTML/XHTML ist mir dieser Bug noch nie begegnet :suspekt: