alite 所以我使用了这个网站的教程:http://www.webreference.com/programming/css_gallery/index.html
问题是,当我添加更多图片时,右侧的图库超出了 div 边距。为了解决这个问题,我使用了 overflow:auto。现在当有更多图片时,我可以向下滚动我的 div。问题是当我将鼠标悬停在 div 的顶部时显示的图像。所以当我向下滚动太多时,图像要么从顶部被剪掉,要么根本不出现。所以它有点像在这个页面上。如果你向下滚动这个页面足够远,你将不会再看到这篇文章,除非你向上滚动。有没有我可以用来解决这个问题的 CSS 代码。基本上我想要它的位置:固定效果在带有悬停的 div 框中。那么我该如何编辑教程代码来做到这一点呢?
最佳答案
问题出在教程中的第 9 步
#container li {
float:left;
}
要了解 float 的一个重要概念是 clear 属性。因为图像的空间超过了包含 div 的空间,所以图像实际上落在了 div 之外。有几种方法可以解决此问题。阅读此处了解更多信息 http://css-tricks.com/all-about-floats/
1.overflow: auto;
就像你已经实现的一样
2.定义一个类
.clear {
clear:both;
}
并把
3.使用伪选择器:after
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
将
就我个人而言,我更喜欢方法 3,因为它使标记更清晰。请注意方法 3 的浏览器兼容性。
关于css - 如何制作 :hover images scroll with div box,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11319925/