Question

纯CSS实现鼠标移动到图片上 图片下拉一个图片 鼠标移开恢复 不要用到JS

就像淘宝网一样 鼠标移到一个商品上 会从上面下拉一张半透明的图 上面还有“点击查看详情”的文字
鼠标移开又回到上面 途中有动画效果 有过渡
要做到这样的效果 只用CSS怎么实现
请写一下代码 并说明原理 谢谢

Answer 1

你去看一下CSS3 我可以告诉你就是transition 和 hover就OK了

transition控制动画时间
然后hover改变DIV的高度 再来个overflow:hidden就搞定了呗

追问

能写一下代码吗
写个例子呗 谢谢

图片的延伸我知道
但这是一张图上的效果
我要的是两张图 一张图应该是叠在另一张图上面的 而且 鼠标如果不经过的话 这张图是不显示的 文字也是
做到这样的效果要怎么弄呢

追答

那还不简单吗？ CSS的HOVER事件 先给不显示的图 比如是img1 display:none;
然后hover的时候来个display:inline 不就行了