本篇文章讲述了css如何实现商品封面图触摸向上浮动，不了解css如何实现商品封面图触摸向上浮动同学，我们一起来看看本篇文章吧！、
今天在写css时需要实现：当鼠标悬停在由图片和介绍组成的超链接时，榴莲向上浮动的效果。
我在实现这个效果时思路分为以下几步：
鼠标悬停
图片移动
下方元素绝对定位
立即学习“前端免费学习笔记（深入）”；
增加过渡时间
1.鼠标悬停-增加伪类选择器：hover
当鼠标悬停时改变元素样式，首先想到的是使用伪类选择器:hover。在写这里的时候遇到的问题是，悬停在超链接上仅使图片部分移动，而文字介绍部分不移动。因此在写伪类的时候不能写成#id a:hover，而应在其后再加上图片部分p的类选择器，即#id a:hover .class {}。这样便能实现超链接悬停而仅移动图片。
2.图片移动-改变元素的margin/padding
要使得图片移动，就是改变图片的位置，使得悬停时图片位置上移，那么我们可以改变元素的margin或者padding属性，以达到移动目的
3.下方元素绝对定位
由于流的影响，图片位置的移动会影响下面文字介绍和价格的位置，即整体均向上移动。为了使其留在原位，其位置应该改为绝对定位，不再赘述。
4.增加过渡时间-transition
为使过度不太生硬，需要增加transition属性。但需要注意的是，不提议在:hover中增加transition属性，因为当鼠标移开时，transition属性便消失，这样鼠标移开时便显得过于生硬。只要在需要移动的元素，例如上面的.class中直接添加transition属性即可。
相关推荐：
关于css浮动元素的居中
页面图片浮动左右滑动效果的简单实现案例
以上就是css实现商品封面图向上浮动方法详细讲述的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609092.html
微信扫一扫 
支付宝扫一扫 
