2012-11-14 70 views
0

我正在尋找創建一個簡單的動畫,如果你移動鼠標打開按鈕打開,你看到一個單詞,如果你離開它,按鈕關閉。鼠標懸停和關閉XHTML/HTML5

我想要的是它打開時的反向順序,所以當鼠標從按鈕移動時,它慢慢關閉而不是關閉,就像打開它一樣。

有沒有一種方法可以僅使用XHTML或HTML5來實現這一點?

+0

你是什麼意思按鈕慢慢關閉? – Andy

+1

這不是一個HTML5的東西,你應該調查關於CSS3動畫或JS動畫。 – Skatox

+0

你也許可以用CSS做到這一點...取決於「打開」的含義。 –

回答

4

如果我理解您的要求,這是你想要什麼:

<div id="button"> 
    <span>This is your Text</span> 

</div> 

<style> 
    #button{ 
     height: 20px; 
     width: 100px; 
     background-color: blue; 
     color: white; 
     transition: height 0.25s linear 0.25s; 
    } 

    #button span{ 
     opacity: 0; 
     transition: opacity 0.1s linear; 
    } 

    #button:hover{ 
     height: 50px; 
     transition: height 0.25s linear; 
    } 

    #button:hover span{ 
     opacity: 1; 
     transition: opacity 0.1s linear 0.25s; 
    } 
</style> 

這個片段創建一個按鈕100x20px和懸停(當你用你的鼠標移動),它變得更大和文本被顯示。