渣渣 发表于 2014-12-23 14:13:11

淘宝宝贝展示-CSS3动态边框代码

淘宝宝贝展示模板代码 边框动态展示模块 --CSS动态边框:鼠标经过显示黑色边框,鼠标移开边框消失。效果如下图所示


<div style="height:780px;">
<div class="J_TWidget" data-widget-type="Carousel" data-title="网店装修网" data-widget-config="{'duration':0.1,'activeTriggerCls':'\u00A0tshop-pbsm-shop-nav-ch','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'nav_zw','contentCls':'content_zw','autoplay':true}" style="position:relative;">
    <ul class="content_zw" style="display: none; width: 999999px; left: 0px; position: absolute;">
      <li class="-_-switchable-panel-internal283 -_-switchable-panel-internal206 ks-switchable-panel-internal1739" style="display: block; float: left;"> </li>
    </ul>
    <ul class="nav_zw">
      <li style="width:950px;height:500px;" class="ks-switchable-trigger-internal1738 tshop-pbsm-shop-nav-ch">
      <div class="new-issue-list310-index clearfix">
          <div class="con">
            <TABLE border=0 cellSpacing=0 cellPadding=0 width=950 height=771>
            <TBODY>
                <TR>
                  <TD><A href="#"
      target=_blank><IMG alt=""
      src="http://img.tbzxiu.com/05/TB2RnvWaXXXXXXLXXXXXXXXXXXX_!!688196721.jpg" width=317
      height=387>
                  <DIV style="WIDTH: 300px; HEIGHT: 370px"
      class=footer-more-trigger></DIV>
                  </A></TD>
                  <TD><A href="#"
      target=_blank><IMG alt=""
      src="http://img.tbzxiu.com/05/TB2C.zVaXXXXXalXXXXXXXXXXXX_!!688196721.jpg" width=313
      height=387>
                  <DIV style="WIDTH: 300px; HEIGHT: 370px"
      class=footer-more-trigger></DIV>
                  </A></TD>
                  <TD><A href="#"
      target=_blank><IMG alt=""
      src="http://img.tbzxiu.com/05/TB2DK_VaXXXXXa7XXXXXXXXXXXX_!!688196721.jpg" width=320
      height=387>
                  <DIV style="WIDTH: 300px; HEIGHT: 370px"
      class=footer-more-trigger></DIV>
                  </A></TD>
                </TR>
                <TR>
                  <TD><A href="#"
      target=_blank><IMG alt=""
      src="http://img.tbzxiu.com/05/TB2o4LVaXXXXXaWXXXXXXXXXXXX_!!688196721.jpg" width=317
      height=384>
                  <DIV style="WIDTH: 300px; HEIGHT: 370px"
      class=footer-more-trigger></DIV>
                  </A></TD>
                  <TD><A href="#"
      target=_blank><IMG alt=""
      src="http://img.tbzxiu.com/05/TB2SkPTaXXXXXacXXXXXXXXXXXX_!!688196721.jpg" width=313
      height=384>
                  <DIV style="WIDTH: 300px; HEIGHT: 370px"
      class=footer-more-trigger></DIV>
                  </A></TD>
                  <TD><A href="#"
      target=_blank><IMG alt=""
      src="http://img.tbzxiu.com/05/TB2QIPWaXXXXXXMXpXXXXXXXXXX_!!688196721.jpg" width=320
      height=384>
                  <DIV style="WIDTH: 300px; HEIGHT: 370px"
      class=footer-more-trigger></DIV>
                  </A></TD>
                </TR>
            </TBODY>
            </TABLE>
          </DIV>
      </DIV>
      </LI>
    </UL>
</DIV>
</DIV>

导航CSS代码:.new-issue-list310-index{width:950px;position:relative;padding:0px;}.new-issue-list310-index .con a{display:block;position:relative;padding:0px;}.new-issue-list310-index .con a img{display:block;padding:0px;}.new-issue-list310-index .con a div{border:0px solid #000;visibility:hidden;left:0;top:0;right:0;bottom:0;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;opacity:0;padding:0px;}.new-issue-list310-index .con a:hover div{border:7px solid #000;visibility:visible;opacity:1;padding:0px;}

页: [1]
查看完整版本: 淘宝宝贝展示-CSS3动态边框代码