CSS3 - 爲什麼我的轉換不起作用？

我一直在使用CSS3過渡，但這是我嘗試過的第一個transform，它似乎沒有遵循相同的規則。（注：我只是在-moz測試現在....）CSS3 - 爲什麼我的轉換不起作用？

我想要實現：

在li其子.feat_tt的懸停動畫下跌20像素
上去懸停我希望它恢復到原來的位置

我的代碼：

.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>

來源

2011-08-16 Haroldo

似乎在mouseover和mouseout上工作，http://jsfiddle.net/6SwDk/（使用Firefox 6） – MikeM

這不是最漂亮的東西，但它似乎做你在問什麼。我所做的只是逐行移動你的代碼，它似乎工作http://jsfiddle.net/b3AEf/你能解釋它在做什麼，它不應該？它似乎回到了「去世」。 –

你的代碼工作的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

來源

2011-08-16 18:31:40 foochow

CSS3 - 爲什麼我的轉換不起作用？

回答

相關問題