float
我有一个使用CSS 中的属性排列的 2×2 图像网格。当我将鼠标悬停在每个图像上时,我想通过在悬停时将其不透明度从 0 切换到 1 来在每个图像上显示一个小的叠加层。当我将图像悬停在第一行时,我的代码效果很好。但是当我将鼠标悬停在下排图像上时,激活的叠加层仍然是顶行中的那个。
我觉得是定位的问题。
我的代码在这里:http: //jsfiddle.net/zZXZX/27/
PS:请不要介意设计的小故障。
float
我有一个使用CSS 中的属性排列的 2×2 图像网格。当我将鼠标悬停在每个图像上时,我想通过在悬停时将其不透明度从 0 切换到 1 来在每个图像上显示一个小的叠加层。当我将图像悬停在第一行时,我的代码效果很好。但是当我将鼠标悬停在下排图像上时,激活的叠加层仍然是顶行中的那个。
我觉得是定位的问题。
我的代码在这里:http: //jsfiddle.net/zZXZX/27/
PS:请不要介意设计的小故障。
.movie{
display:block;
float:left;
position:relative;
}
您需要添加position:relative
到您的 .movie 类。position:absolute
寻找它最近的不是静态位置的父项。
您将覆盖定位在绝对位置,而不指定相对父级。
http://jsfiddle.net/tomprogramming/zZXZX/28/
position:absolute
使用相对于它的第一个父级 not 的偏移量来定位您的叠加层position:static
,或者如果没有找到文档根目录。
添加position:relative
到.movie
.