Html CSS3动画多重悬停

我有两个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>

#容器
{
宽度：212px；
位置：固定；
左：42.5%；
最高：21.7%；
边框：0px实心红色；
溢出：隐藏；
}
#首先
{
背景色：#fff；
宽度：67px；
身高：212px；
-webkit转换：所有1，-webkit转换1；/*用于Safari 3.1到6.0*/
-moz转换：所有1，-webkit转换1；
-ms转换：所有1，-webkit转换1；
-o-转换：所有1，-webkit转换1；
转换：所有1，-webkit转换1；
转换：所有1，转换1；
浮动：左；
}
#第一：悬停
{
高度：354px；
}
#第二
{
背景色：#fff；
宽度：45px；
身高：212px；
-webkit转换：所有1，-webkit转换1；/*用于Safari 3.1到6.0*/
-moz转换：所有1，-webkit转换1；
-ms转换：所有1，-webkit转换1；
-o-转换：所有1，-webkit转换1；
转换：所有1，-webkit转换1；
转换：所有1，转换1；
浮动：左；
左边距：15px；
}
#第二：悬停
{
高度：354px；
}

---

有什么想法吗？：/

你的意思是这样的吗

我在

#second

元素中创建了一个pargraph，并使其在您悬停

#second

元素时显示

它还增加了高度

编辑：

现在，我在悬停

#second

框时使用了jQuery函数

fadeIn

编辑2：

现在，当您将鼠标移离第二个框时，

段落

也会消失

编辑：3

正如所承诺的，当您单击

#second

元素时，

#third

元素淡入

---

你到底在寻找哪个函数？我的错误我忘了提到我希望文本在我悬停在divook上时显示淡入效果这很完美我感谢你的帮助：D:D你知道如何使div可点击，以便它可以显示一个带有文本或表单的新div吗？我知道，今晚我会这样做。但是如果这解决了你的问题，请接受我的回答，这样其他人就知道这个问题已经解决了。但是我会在几个小时内更新这个答案。@ArisHorizon更新了线程，现在当您单击

#second

元素时，

#second

元素淡入淡出。因此，如果我添加这个$（'#first'）。单击（函数（）{$（'#third'）。淡出（2000）；}）；当我点击第一个，第三个会消失吗？