我一直在很好地使用 CSS3 转换，但这是我尝试的第一个 transform，它似乎没有遵循相同的规则。 (注意:我现在只是在 -moz 中测试....)
我要实现的目标:
- 悬停在
li上时，它的子元素.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>
最佳答案
您的代码适用于 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
关于html - CSS3 - 为什么我的转换不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7083042/