需要帮助获取包装器 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;
}
最佳答案
您的代码似乎没问题。但是,浏览器默认设置会干扰定位。
只需更改以下内容
更新
您使用的图像切片是 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 宽度。
关于jquery - 使用 jquery 悬停效果定位列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14155474/