javascript - jQuery：当用户将鼠标悬停在按钮上时图片更大？

Question

所以我正在制作一个书柜形状的左水平导航栏。我将书籍水平放置，一个在彼此的顶部，每本书都是一个不同的链接。

这些按钮有两种状态，静态（只是一本书）和悬停（一本 3d 外观的书）。这给出了用户从书柜中拉出书的效果。现在对于 jQuery：

我打算使用 jQuery 将悬停图像淡入上一张图像的顶部，但是我想知道如果悬停图像大约 10px 会发生什么？

当其中一本书的悬停图像淡入时，这堆书肯定会向下移动 10 像素吗？

帮助？:)

Answer 1

您可以将较大的书放置在负边距的位置以与其他书重叠。这是一个简单的例子：

演示：

http://jsfiddle.net/5TeHu/

CSS：

a{
    display:block;
    width:30px;
    height:100px;
    border:1px solid #aaa;
    margin:10px 1px;
    background:#ddd;   
    float:left;
    position:relative;
}

a:hover{
    width:50px; 
    height:120px;
    margin:0 -9px;
    z-index:2;
}

​</p>