2014-04-03 57 views
0

有什麼方法可以在使用時顯示多個CSS轉換:hover?在多個div ID上顯示CSS轉換(例如:#box:hover + #display)

我認爲它更容易理解我想要,如果你看看下面這個例子做:

<head> 
<style> 

#box{position:absolute; 
width:50px; 
height:50px; 
background-color:grey; 
-webkit-transition: 0.3s; 
transition: 0.3s;} 

#box:hover + #display 
{background-color:lightgreen; 
visibility:visible; 
-ms-transform:scale(2); 
-webkit-transform:scale(1.1); 
transform:scale(1.1);} 

#display 
{position:absolute; 
top:80px; 
height:300px; 
width:500px; 
visibility:hidden; 
-webkit-transition: 0.3s; 
transition: 0.3s;} 

</style> 
</head> 

<body> 
<div id="box"> 
</div> 

<div id="display"> 
</div> 
</body> 

回答

0

是的,你可以顯示多個變換....我創建了一個小提琴這裏... http://jsfiddle.net/vAT38/。這裏的關鍵是當你有一個轉換時,css將執行最後一個寫入的命令。所以不是寫作..

transform:scale(1.1); 
transform:rotate(7deg); 

你必須給它一個單行像...

transform: scale(1,1) rotate(7deg) 

SRY我只是用縮放和旋轉爲例。希望這有助於

另一個更新這次3個trnsforms ... http://jsfiddle.net/vAT38/1/

+0

感謝,但,這不是我的意思。我想讓灰色的「框」使動畫和「顯示」剛好出現 – user3332711

+0

這是你正在尋找的東西嗎? http://jsfiddle.net/vAT38/2/ – Sai

+0

這就是我一直在尋找的非常感謝你! – user3332711