CSS怎样实现鼠标移过弹出介绍的商品展示效果?
Admin 2021-12-31 群英技术资讯 845 次浏览
这篇文章给大家分享的是用CSS怎样实现鼠标移过弹出介绍的商品展示效果,这种商品展示效果比较常见,小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起学习一下吧。
html代码
<div class="product"> <ul> <li> <div class="pro-img"> <a href="#"> <img src="images/pms_1524883847.49276938!220x220.jpg" alt=""> </a> </div> <h3><a href="#">小米电视4A 43英寸青春版</a></h3> <p class="desc">全高清屏 / 人工智能语音</p> <p class="price"> <span>1499</span>元 <del>1699</del> </p> <div class="review"> <a href="#"> <span class="msg">一如既往的好,小米情怀</span> <span class="auther"> 来自于 惊喜 的评价 </span> </a> </div> </li> </ul> </div>
CSS3代码
* { margin: 0; padding: 0; } ul, ol { list-style: none; } input, button { outline: none; border: none; } a { text-decoration: none; } .clearfix::before, .clearfix::after { content: ""; height: 0; line-height: 0; display: block; visibility: hidden; } .clearfix::after { clear: both; } body { padding: 100px; background-color: #f5f5f5; } .product li { float: left; width: 234px; height: 246px; padding: 34px 0 20px; z-index: 1; margin-left: 14px; margin-bottom: 14px; background: #fff; -webkit-transition: all .2s linear; transition: all .2s linear; position: relative; } .pro-img { width: 150px; height: 150px; margin: 0 auto 18px; } .pro-img a { width: 100%; height: 100%; } .pro-img img { display: block; width: 100%; height: 100%; } .product li h3 { margin: 0 10px; font-size: 14px; font-weight: 400; text-align: center; } .product li h3 a { color: #333; } .desc { margin: 0 10px 10px; height: 18px; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #b0b0b0; } .price { font-size: 14px; margin: 0 10px 10px; text-align: center; color: #ff6700; } .price del { color: #b0b0b0; } .review { position: absolute; bottom: 0; left: 0; z-index: 3; width: 234px; height: 0; overflow: hidden; font-size: 12px; background: #ff6700; opacity: 0; -webkit-transition: all .2s linear; transition: all .2s linear; } .review a { color: #757575; display: block; padding: 8px 30px; outline: 0; } .review a span { display: block; margin-bottom: 5px; color: #fff; } .product li:hover { -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1); box-shadow: 0 15px 30px rgba(0,0,0,0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); } .product li:hover .review { opacity: 1; height: 76px; }
运行效果图:
以上就是用CSS实现鼠标移过弹出介绍的商品展示效果的代码,本文只是提供了一种实现思路,代码仅供参考,需要的朋友可以了解看看,希望对大家学习CSS的使用有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本篇文章主要为大家讲解了html5中一个新标签,html5 ruby标签,虽然不算是新的,但也是在html5里新的标签,html5 ruby标签的定义和具体的用法实例都在这篇文章中,希望大家认真阅读
这篇文章主要介绍了浅谈CSS3 box-sizing 属性 有趣的盒模型 ,需要的朋友可以参考下
在css中,可以利用border-image属性和linear-gradient()函数来将图片边框的颜色设置为渐变色。border-image属性用于设置图片边框 linear-gradient()函数用于实现线性渐变实
这篇文章主要介绍了css如何绘制特殊图形的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了AmazeUI 列表的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008