Javascript jQuery-文本描述悬停

我有一个显示我的一些作品（公文包）的div网格，我正在处理一个鼠标悬停事件，使标题div向上移动并显示描述

看一看:

现在，正如您所看到的，当您将鼠标悬停在一个框上时，标题框的高度会向上移动，显示一个描述。我想它工作得很好，但是描述文本（当您没有悬停时）位于div下面

如果你不明白我的意思，刷新页面，突出显示所有内容（CNTLA）。。。你看到描述文字了吗？是的，我该如何防止这种情况发生？仅在其悬停处于活动状态时显示，而在悬停未处于活动状态时不显示

这是我的代码，HTML，这只是div的第一行（前两个框）：

还有我的JS：

function portfolio_hover_over(cube){

    // hides the text panel
    for(var i = 1; i < 7; i++){
        if(i != cube){

            //animated panel back to 15px
            $('#cube_title'+i).animate({
                height: '15px'}, 200, function(){
            });
        }
    }


    $('#cube_title'+cube).animate({
        height: '130px'}, 200, function(){
    });


}

函数组合悬停（立方体）{
//隐藏文本面板
对于（变量i=1；i<7；i++）{
如果（i！=cube）{
//动画面板回到15px
$（'#立方体标题'+i）.动画({
高度：'15px'}，200，函数（）{
});
}
}
$（“#立方体标题”+立方体）。动画({
高度：'130px'}，200，函数（）{
});
}

---

我知道这里有很多东西，但是我会很感激在这方面能得到的任何帮助，谢谢

您需要将

溢出：隐藏

添加到

多维数据集基础

css块

您需要将

溢出：隐藏

添加到

多维数据集基础

css块

用于准备问题，这样我们就不必自己粘贴副本了。蒂姆·班克斯的解决方案可以做到这一点，仅供参考：ID对于页面上的单个元素必须是唯一的。改用类。注意，谢谢。还有，有人能告诉我为什么他们的答案是滞后的吗？请用它来准备问题，这样我们就不必自己粘贴副本了。蒂姆·班克斯的解决方案可以做到这一点，仅供参考：ID必须是页面上单个元素的唯一ID。改用类。注意，谢谢。还有，有人能告诉我为什么他们的时间是滞后的吗？

#cube_div{
    float:left;
    width:40px;
    height:100px;
}
#cube_gap{
    width:800px;
    height:40px;
    float:left;
}
.cube_sub_title{
    font-size:12px;
    font-weight: normal;    
}

#cube_title1{
    position:absolute;
    width:335px;
    height:15px;
    background-image: url(images/alpha_black_strong.png);
    background-repeat: repeat;
    bottom:0px;
    padding:10px;
    color:#EEE;
}
#cube_title2{
    position:absolute;
    width:335px;
    height:15px;
    background-image: url(images/alpha_black_strong.png);
    background-repeat: repeat;
    bottom:0px;
    padding:10px;
    color:#EEE;
}
#cube_base{
    width:355px;
    height:200px;
    background-color:#080;
    float:left;
    padding:5px;

    background-color:#f0f0f0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius:2px 2px 2px 2px;
    border: 1px solid #bbbbbb;
    background-image: url(images/icon_slate.png);
    background-repeat: repeat-x;
    background-position: top;
    cursor:pointer;
}

/* Logo placements */
#cube_logo{
    height:20px;
    float:right;
    left: 50px;
    margin-top:-2px;
}

/* Actual Content for the cube divs */
#cube1{
    position:relative;
    width:355px;
    height:200px;
    background-color: #777;
}
#cube2{
    position:relative;
    width:355px;
    height:200px;
    background-color: #777;
}

function portfolio_hover_over(cube){

    // hides the text panel
    for(var i = 1; i < 7; i++){
        if(i != cube){

            //animated panel back to 15px
            $('#cube_title'+i).animate({
                height: '15px'}, 200, function(){
            });
        }
    }


    $('#cube_title'+cube).animate({
        height: '130px'}, 200, function(){
    });


}