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

原创 2013年12月04日 14:28:52

模仿美乐乐,在商品详情页添加到店体验,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的博客

相关文章推荐

ECSHOP 商品详情页 购物车页 添加购买数量加减按

找到模板文件中的good.dwt,查找类似 的数量文件输入控件(有的模板可能整合到了类似goods_info.lib库文件中)。将这一整段修改为 span class="good...

ECSHOP商品详情页调用同一分类下产品

1.includes\lib_goods.php,添加function samecat_goods/** * 获得同分类下的商品 * * @access public * @param integer...

ecshop商品详情页图片放大与切换

  • 2013年05月07日 17:00
  • 23KB
  • 下载

Ecshop模板开发(五):商品详情页购物车和立即购买的实现

1、下载json2.js (http://download.csdn.net/detail/schenker/2220609) 2、将common.js文件的35行更改: 源代码: Ajax....

Ecshop模板开发(五):商品详情页图片相册jqzoom放大

1、下载jqzoom2.3 () 2、引入js和css文件 {insert_scripts files='jquery-1.6.js,jquery.jqzoom-core-pack.js'}...

仿新浪NBA的移动端H5专题详情页

  • 2017年07月17日 10:14
  • 12.4MB
  • 下载

商品详情页中,当鼠标放到小图上时,改变大图的图片为当前小图的图片

在做商品详情页时,我们会遇到这样的问题,当鼠标移动到小图上的时候,所对应的大图也会随之改变,变成当前鼠标所在位置的小图图片,今天我给大家分享一下我的做法,希望对大家有所帮助,也希望得到大家的指点. ...
  • Noneyes
  • Noneyes
  • 2017年04月18日 20:42
  • 352
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ECshop 详情页添加鼠标移动到文字上自动弹出该选项的简介
举报原因:
原因补充:

(最多只允许输入30个字)