CSS3動畫多懸停

Question

我有2個div。 當我將鼠標懸停在一個div上時，它會更改高度而展開。 當我將鼠標懸停在該div上時，我想使其在屏幕上的某處顯示具有漸隱效果的文本，最后，當我單擊該div時，我想在屏幕上的某處再次顯示另一個div或文本。 這是我到目前為止創建的代碼。

<style>
        #container
    {
        width:212px;
        position:fixed;
        left:42.5%;
        top:21.7%;
        border: 0px solid red;
        overflow: hidden;
    }

    #first
    {
        background-color:#fff;
        width:67px;
        height:212px;
        -webkit-transition:all 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
        -moz-transition:all 1s, -webkit-transform 1s;
        -ms-transition:all 1s, -webkit-transform 1s;
        -o-transition:all 1s, -webkit-transform 1s;
        transition:all 1s, -webkit-transform 1s;
        transition:all 1s, transform 1s;    
        float:left;
    }

    #first:hover
    {
        height:354px;

    }


    #second
    {
        background-color:#fff;
        width:45px;
        height:212px;
        -webkit-transition:all 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
        -moz-transition:all 1s, -webkit-transform 1s;
        -ms-transition:all 1s, -webkit-transform 1s;
        -o-transition:all 1s, -webkit-transform 1s;
        transition:all 1s, -webkit-transform 1s;
        transition:all 1s, transform 1s;
        float:left;
        margin-left:15px;
    }

    #second:hover
    {
        height:354px;
    }

</style>

<div id="container">
    <div id="first"></div>
    <div id="second"></div>
</div>

有想法嗎？ ：/

Answer 1

你的意思是這樣嗎？

http://jsfiddle.net/vLz3c/1/

我在#second元素內創建了一個圖形，並在將鼠標懸停在#second元素上時顯示了該#second 。

它還增加了高度。

編輯：

http://jsfiddle.net/vLz3c/2/

現在，我將fadeIn懸停在#second框上時使用了jQuery函數fadeIn 。

編輯2：

http://jsfiddle.net/vLz3c/3/

現在，當您將鼠標移離#second框時，該paragraph也消失了

編輯：3

如所承諾的那樣，當您單擊#second元素時， #third元素會淡入。

http://jsfiddle.net/vLz3c/4/