jquery - 使用 jquery 悬停效果定位列表

Question

需要帮助获取包装器 div 中的列表。此外，我作为“元素”的图像宽度略有不同，无论哪种方式我都觉得有解决方案，但是，我似乎找不到它。如果有人知道淡入淡出悬停效果的更简单代码，那可能是最简单的。 jquery 在这里非常好，只是定位有问题。谢谢!

这是到目前为止的样子 - http://marisareviewsfilms.com/demo

这是我想要的样子 - http://marisareviewsfilms.com/lisa#

我的 CSS(边框现在只是为了引导我):

#wrapper {
width: 827px;
height: 577px;
padding: 0px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
border: 1px solid blue;
}

.gallery li {
float: left;
margin-left: 0px;
margin-right:0px;
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
height: 577px;
display: ;
width: 129px;
position: relative;
border: 1px solid green;
}

img.grey {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.color {
position: absolute;
left: 0; 
top: 0;
}

Answer 1

您的代码似乎没问题。但是，浏览器默认设置会干扰定位。

只需更改以下内容

1. 在 css 的开头应用 reset css .
2. 添加 clearfix类到 ul.gallery

更新

您使用的图像切片是 131px，除了第一个和最后一个(分别是 148px、151px)。
所以在 CSS 中更改它:

.gallery li {
    width: 131px;
}
.gallery li:first-child {
    width: 148px;
}
.gallery li:last-child {
    width: 151px;
}

但是，这适用于所有现代浏览器。
如果你想支持 IE7,8，在第一个和最后一个 li 中添加类，然后相应地放置 css(如上)。

<li class="first">
...
<li class="last">

注意:请移除绿色/蓝色边框，因为它们各占 1px 宽度。