CSS3 - почему мое преобразование не работает? - PullRequest
Новая
       0

CSS3 - почему мое преобразование не работает?

0 голосов
/ 16 августа 2011

Я хорошо использовал переходы CSS3, но это первый transform, который я пробовал, и, похоже, он не работает по тем же правилам.(примечание: сейчас я просто тестирую в -moz ....)

Чего я пытаюсь достичь:

  • при наведении li этоchild .feat_tt оживляет на 20px
  • при переключении. Я хочу, чтобы он вернулся в исходное положение

Мой код: 

.feat_tt { top: -180px; -moz-transition: all 300ms ease-out;}
.feat_props li:hover .feat_tt { -moz-transform: translate(0, 20px); }

Что происходит:

  • Анимация запускается при первом .feat_tt наведении курсора.
  • При откатывании позиция не возвращается
  • при наведении другого .feat_tt послеВо-первых, анимация уже выполнена.(они в отдельных li)

вот пример HTML-кода, который я использую для: 

<ul class="feat_props">
    <li>
        <p>Barsham West Barns</p>
        <div class="feat_tt">Sleeps 44 people mofo!</div>
    </li>
    <li>
        <p>Barsham West Barns</p>
        <div class="feat_tt">Sleeps 44 people mofo!</div>
    </li>
    <li>
        <p>Barsham West Barns</p>
        <div class="feat_tt">Sleeps 44 people mofo!</div>
    </li>
</ul>

1 Ответ

0 голосов
/ 16 августа 2011

Ваш код работает на Firefox 5. Все, что я сделал, это выгрузил все, что вы написали, на страницу HTML5 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.feat_tt { top: -180px; -moz-transition: all 300ms ease-out;}
.feat_props li:hover .feat_tt { -moz-transform: translate(0, 20px); }
</style>
</head>

<body>

<ul class="feat_props">
<li>
    <p>Barsham West Barns</p>
    <div class="feat_tt">Sleeps 44 people!</div>
</li>
<li>
    <p>Barsham West Barns</p>
    <div class="feat_tt">Sleeps 44 people!</div>
</li>
<li>
    <p>Barsham West Barns</p>
    <div class="feat_tt">Sleeps 44 people!</div>
</li>
</ul>
</body>
</html>

Для получения информации об использовании преобразования свойства CSS3 вы можете проверить http://www.w3schools.com/css3/css3_2dtransforms.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...