Эффект перехода/наведения CSS3 не работает в Firefox;ошибка Firefox?

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

Вопрос

Я пытаюсь создать эффект наведения мыши, который сдвигает верхний слой влево и показывает нижний слой с помощью CSS3.Код работает в Chrome, но не в Firefox... я снова сделал какую-то глупость?Спасибо за вашу помощь!

Редактировать:Должно быть, я сделал что-то не так, потому что даже если я пропущу код перехода, при наведении курсора на «слои» в Firefox ничего не произойдет... :(

Код:

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

Стиль:

.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; 
}
Это было полезно?

Решение

Оказывается, в Firefox есть ошибка (непрозрачность при наведении Firefox), и я решил проблему, изменив

.layers:hover .over {}

к

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

Я только что обновился до Firefox 5 (с Firefox 4);не знаю, исправили ошибку или нет...

Другие советы

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top