关闭

ECshop 详情页添加鼠标移动到文字上自动弹出该选项的简介

507人阅读 评论(0) 收藏 举报
分类:

模仿美乐乐,在商品详情页添加到店体验,45天退换货,质保三年,价格保护这几个鼠标移动到文字上自动弹出下面的文字。

<li style="clear:both;">
    <ul id="box">
     <li ><a href="#" >到店体验<div><p>到店体验</p><br/>我们欢迎你的到来,我们将为你提供最优质的服务 </br>咨询电话:123456</div></a></li>
     <li ><a href="#" >45天退换<div><p>45天退换货</p></br>我们承诺45天无理由退换货,买家收到货物发现有质量问题或与网站描述不相符;退货申请应在签收货物后的45天内完成;质量问题商家邮寄费用与卖家退换货寄回商品的邮费由商家承担;退换货时需包装好,附件、赠品、赠券等完好<br/>咨询电话:123456</div></a></li>
     <li ><a href="#">质保三年<div><p>质保三年</p><br/>保修期限为三年,保修期内凡属商品质量问题,我公司一律负责免费维修<br/>咨询电话:123456</div></a></li>
     <li ><a href="#">价格保护<div><p>价格保护</p><br/>我承诺:已购商品未出库前,如果降价,返还差额,如果涨价,不用补差价<br/>咨询电话:123456</div></a></li>
    </ul>
     </li>

相应的css

#box{
   padding:     0px;
   margin:      0px;

 }
#box li{
   float:left;
   background:white;
   border:1px solid gray;
   width:50px;
   height:20px;
   margin-left:5px;
   padding:0px;
}
#box li a:hover div{
   display:block;
   cursor:pointer;
   padding:0px;

}
#box li div{
   display:none;
   width:250px;
   border:1px solid gray;
   background:white;
   margin:0px;
   padding-left:5px;
   font-size:10px;
   position:relative;
   color:#7E7E7E;
  
}
#box li div p{
   background:#CBC9CB;
   color:black;
}

css学的不好,代码可能有点冗余,不过效果是出来了,个人感觉着还不错的。效果如下:


ECshop 详情页添加鼠标移动到文字上自动弹出该选项的简介 - cuiruijunphp - cuiruijunphp的博客
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:42109次
    • 积分:1115
    • 等级:
    • 排名:千里之外
    • 原创:74篇
    • 转载:2篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论