CSS3 - 为什么我的转换不起作用？

Question

我一直在使用 CSS3 转换很好，但这是我尝试过的第一个transform ，它似乎没有按照相同的规则播放。 （注意：我现在只是在-moz中测试......）

我想要达到的目标：

在li的 hover 上，它的孩子.feat_tt动画向下 20px
在取消悬停时，我希望它恢复到原来的 position

我的代码：

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

怎么了：

animation 在第一个.feat_tt你 hover 上运行。
在取消悬停时，position 不会恢复
在第一个之后悬停另一个.feat_tt ，就好像 animation 已经执行了。 （它们在不同的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>

Answer 1

您的代码适用于 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

CSS3 - 为什么我的转换不起作用？

问题描述

1 个解决方案

解决方案1
0 2011-08-16 18:31:40

CSS3 - 为什么我的转换不起作用？

问题描述

1 个解决方案

解决方案1 0 2011-08-16 18:31:40

解决方案1
0 2011-08-16 18:31:40