Эффект перехода/наведения CSS3 не работает в Firefox;ошибка Firefox?
-
26-10-2019 - |
Вопрос
Я пытаюсь создать эффект наведения мыши, который сдвигает верхний слой влево и показывает нижний слой с помощью 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);не знаю, исправили ошибку или нет...
Другие советы
Смотрите этот вопрос: Почему мой переход CSS3 не работает в Firefox?
Не связан с StackOverflow