CSS3 -Übergang/Schwebeffekt funktioniert nicht in Firefox; Ein Firefox -Fehler?

StackOverflow https://stackoverflow.com/questions/6309691

Frage

Ich versuche, einen Maus-Over-Effekt zu erzeugen, der die obere Schicht nach links schiebt und die untere Schicht mit CSS3 aufzeigt. Der Code funktioniert in Chrome, aber nicht in Firefox ... habe ich wieder etwas Dummes gemacht? Danke für Ihre Hilfe!

Bearbeiten: Ich muss etwas falsch gemacht haben, denn selbst wenn ich den Übergangscode auslasse, passiert nichts, wenn ich über "Ebenen" in Firefox schwebe ... :(

Der Code:

<html>
  <div class="layers">
    <div class="over">content</div>
    <div class="under">content</div>
  </div>
</html>

Der Style:

.layers {
  position: relative;   
  width: 200px;
  height: 50px;
  overflow: hidden;
}   

.over {
  width: 200px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}   
.under {
  width: 200px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
}           

.layers:hover .over {
  left: -200px; 
}
War es hilfreich?

Lösung

Es stellt sich heraus, dass es einen Fehler in Firefox gibt (Firefox Hover Opacity) Und ich löste das Problem durch Änderung

.layers:hover .over {}

zu

[class="layers"]:hover over {}

Ich habe gerade auf Firefox 5 aufgerüstet (von Firefox 4); Ich bin mir nicht sicher, ob der Fehler behoben wurde oder nicht ...

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top