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

【问题标题】：jQuery: Buttons with a larger picture when user is hovering over it?jQuery：当用户将鼠标悬停在按钮上时图片更大？
【发布时间】：2012-06-03 21:07:06
【问题描述】：

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

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

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

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

帮助？ :)

【问题讨论】：

WhatHaveYouTried.com?不，不一定。将 position:absolute 设置为悬停图像，它将显示在当前页面内容的上方（前面）（前提是它的 z-index 更高）。
问题太模糊了，因为它假设我们知道你的 css 在做什么

标签： javascript jquery css

【解决方案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;
}

【讨论】：