<分区>
我正在尝试制作一组在悬停时向上滚动的社交媒体按钮。
图像的宽度为 145 像素,高度为 290 像素。我只需要显示 145px 的高度,这样当图像悬停时,重新着色的图像(剩余的 145px 高度)将原始图像向上推(我假设溢出将被隐藏)。
我知道它与转换和翻译属性有关,但我不能完全确定我需要做什么。
有人可以帮忙吗?
除非 jQuery 解决方案相当简单,否则我最好将其保留为 CSS 或 HTML。
谢谢。
最佳答案
仅使用 HTML 和 CSS 的非常基本的实现,背景通过过渡进行推送。
div {
height: 145px;
width: 145px;
transition: background 1s ease;
background: url("http://i.imgur.com/X8PyBPp.png") no-repeat left top;
}
div:hover {
background-position: left bottom;
cursor: pointer;
}
<div></div>
关于jquery - 图片向上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28612772/
相关文章:
javascript - firefox 使用 jQuery animate 方法和绝对位置的奇怪行为
HTML CSS 样式高度 :100% Works fine in chrome but not in IE or Firefox [becoming crazy! ]
jquery - 将同一页面上的 #link 锚定到 Woocommerce jQuery 选项卡
javascript - 动态表格行,将点击事件委托(delegate)给新添加的元素
jquery - jquery mobile 的导航栏中的选择未正确发生