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的博客

鼠标移动在文字上面,让其显示详细信息

鼠标移动在文字上面,让其显示详细信息
  • zhangmm122411
  • zhangmm122411
  • 2016年06月23日 16:36
  • 5558

如何实现鼠标放在图片上出现文字说明效果?

最近在浏览网页时,看到一些图片,鼠标一放上去呢,就会有说明文字“浮”上来,移开又“沉”下去,感觉好炫!自己就在网上找实现代码啊,看看事件是怎么实现的!然后就找到了如下的代码: ...
  • ZYGG5521
  • ZYGG5521
  • 2015年08月10日 10:16
  • 3372

利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: ...
  • u012116457
  • u012116457
  • 2015年05月28日 17:08
  • 7019

鼠标移到栏目上自动弹出二级及无限级栏目

  • 2016年07月25日 21:51
  • 6KB
  • 下载

ecshop商品详情页添加多个可在后台编辑的商品描述分类

个人觉得这个功能只要是用ecshop二次开发建站的站长都应该收藏  以后肯定用的着   不收藏小心后悔哦  闲话少说  先贴上测试成功后的图片  前台显示  后台对应两个编辑器 本来想实...
  • Viyoo08
  • Viyoo08
  • 2014年03月23日 00:04
  • 715

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

找到模板文件中的good.dwt,查找类似 的数量文件输入控件(有的模板可能整合到了类似goods_info.lib库文件中)。将这一整段修改为 span class="good...
  • lcw2007101
  • lcw2007101
  • 2015年04月09日 09:24
  • 717

Ecshop 2.7.1 B2B2C 小京东 商城网站 商品详情页二维码显示出错

ecshop开发中商品详情页二维码显示问题
  • liuwendao1993
  • liuwendao1993
  • 2017年11月02日 10:34
  • 109

ECSHOP商品详情页 增加自定义TITLE的方法

  • 2014年02月12日 15:37
  • 36KB
  • 下载

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

1.includes\lib_goods.php,添加function samecat_goods/** * 获得同分类下的商品 * * @access public * @param integer...
  • GlatChen
  • GlatChen
  • 2014年08月29日 16:34
  • 757

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

  • 2013年05月07日 17:00
  • 23KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ECshop 详情页添加鼠标移动到文字上自动弹出该选项的简介
举报原因:
原因补充:

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