html - 将鼠标悬停在图像上,图像的其余部分将出现,但它超出了 css 范围

标签 html css

我有以下代码 http://jsfiddle.net/tbedf/5/它有效。但我想知道我是否可以做一些事情,当将鼠标悬停在图像上后显示完整尺寸时,完整的图像会出现在下面的图像之上,而不是将图像一直向下推。

li { float:left; height:100px; overflow:hidden; margin:10px; }
li:hover { height:auto; }

在此先感谢您,如果您不清楚,请告诉我。

最佳答案

你可以使用这个 CSS:

li {float:left; height:100px;  position:relative; overflow:hidden; margin:10px; }
img {position: relative; height:auto; left:0px; top:0;}
li:hover { overflow:visible; z-index:99;  }

工作 DEMO

关于html - 将鼠标悬停在图像上,图像的其余部分将出现,但它超出了 css 范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13390451/

相关文章:

html - 填充盒子所有空白空间的 float div

html - 如何让我的页面标题有图标?

html - 在面板主体内居中 3 列

jquery - WordPress 中的 Bootstrap 菜单集成导航沃克 ( :hover)

jquery - Onload 使输入大小适合文本长度

javascript - 如何使用 jQuery 或 CSS 设置提交按钮第一个单词的样式

html - 从溢出图像 CSS 中删除多余的空格

javascript - 更改用于修改 div 显示/隐藏的链接的背景颜色

CSS Sprite 加载速度 - 哪个更快?

google-chrome - Chrome 正在对应用了嵌套 CSS 比例的图像进行像素化/处理