在悬停时将居中的div展开到顶部和底部

Question

我遇到了悬停效应的问题，我试图实现。我有3个居中的div彼此相邻。当我将鼠标悬停在其中一个上面时，我希望div扩展到底部和顶部并显示更多内容。任何人都知道CSS和/或jQuery如何实现这一点？这是我想要做的事情的图像。

悬停动画 http://i62.tinypic.com/ek511t.png

http://www.7daysinhavana.com/对元素的宽度产生了影响。但查看他们的css代码显示他们正在使用多个背景图像。

感谢您的回复！

Answer 1

我还不确定究竟是什么问题。但是我想你想要在导航栏上显示你的中心位置。这就是你要找的东西吗？：

http://jsfiddle.net/MYpzD/3/

我修改了你的css：

#container{
   position: absolute;
   top: 50%;

   left: 0;
   width: 100%;
}

.leistungen{
    .leistung{
        width: 33.33%;
        position:relative;
        float: left;
        background-color: #323a98;
        color: #fff;
        .infos{
            display:none;
        }
        &:hover{
            height: 100%;
            .infos{
                display:block;
                position:absolute;
                top:-30px;
                left:-50px;
                background-color:#323a98;
                z-index:10;
                }
            }
    }
}

我给悬停框一个绝对位置，而父对象是一个亲戚，所以我可以添加负距离来向上移动它们。我不得不给他们一个backgroundcolor和一个z-index来隐藏悬停盒下面的东西。

修改

http://jsfiddle.net/MYpzD/4/ 在这个小提琴中，添加了一个新的宽度和边框以及文本的填充。