CSS怎样实现鼠标移过弹出说明的商品展示效果？

发布时间：2023-08-12 13:53:20 所属栏目：语言来源：

导读：这篇文章给大家分享的是用CSS怎样实现鼠标移过弹出介绍的商品展示效果，这种商品展示效果比较常见，小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编

这篇文章给大家分享的是用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;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!