淘宝页头鼠标经过导航条箭头指示效果代码

这一段编码要在渔舟的编码是梳理改动的，当鼠标通过导航栏的文本情况下，会填出往下的箭头标识，而且环境会变为悠悠的深蓝色。


该实际效果编码的关键的机理是借助了滚屏实际效果，这儿使用的一点小窍门便是必须将滚屏的content和nav一部分颠倒，然后就能够表现出这类实际效果。


现阶段这一实际效果只有用以淘宝C店C店，必要时使用天猫店，只需要更换相对定位的class名就可以，其实就是把footer-more-trigger换为mallNav-others就可以。


应用编码的办法：

一、新创建一个950的自定区控制模块。
二、拷贝下边的编码，随后黏贴到自定区中。

 

<div class="footer-more-trigger" style="width:950px;height:100px;border:0;padding:0;top:30px;left:50%;">     <div class="footer-more-trigger" style="width:950px;height:100px;border:0;padding:0;top:0;left:-475px;">       <div style="height:50px;padding-top:25px;padding-bottom:25px;background-color:#111111;">         <div class="J_TWidget" data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','delay':0,'contentCls':'content_yuzhou', 'navCls':'nav_yuzhou','autoplay':false,'duration':0.4}" data-widget-type="Slide" style="position: relative; ">           <ul class="nav_yuzhou" style="width:950px;height:50px;background-color:#212121;">             <li style="width:100px;height:50px;float:right;margin-right:50px;" class="ks-switchable-trigger-internal1638"><a style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>导航栏一</span></a></li>             <li style="width:100px;height:50px;float:right;" class="ks-switchable-trigger-internal1638"><a style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>导航栏二</span></a></li>             <li style="width:100px;height:50px;background:url(导航栏归类背景图案详细地址)  right center no-repeat;float:right;" class="ks-switchable-trigger-internal1638"><a style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>导航栏三</span></a></li>             <li style="width:100px;height:50px;background:url(导航栏归类背景图案详细地址)  right center no-repeat;float:right;" class="ks-switchable-trigger-internal1638"><a style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>导航栏四</span></a></li>             <li style="width:100px;height:50px;background:url(导航栏归类背景图案详细地址)  right center no-repeat;float:right;" class="ks-switchable-trigger-internal1638 ks-active"><a class="title_yuzhou" style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>导航栏五</span></a></li>             <li style="width:100px;height:50px;background:url(导航栏归类背景图案详细地址)  right center no-repeat;float:right;" class="ks-switchable-trigger-internal1638"><a style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>导航栏六</span></a></li>             <li style="width:100px;height:50px;background:url(导航栏归类背景图案详细地址)  right center no-repeat;float:right;" class="ks-switchable-trigger-internal1638"><a  style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>导航栏七</span></a></li>             <li style="width:100px;height:50px;background:url(导航栏归类背景图案详细地址)  right center no-repeat;float:right;" class="ks-switchable-trigger-internal1638"><a  style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>导航栏八</span></a></li>             <li style="width:100px;height:50px;background:url(导航栏归类背景图案详细地址)  right center no-repeat;float:right;" class="ks-switchable-trigger-internal1638"><a style="display:block;width:100%;height:100%;line-height:50px;color:#EEEEEE;text-align:center;"><span>主页</span></a></li>           </ul>          <div style="height:0;">           <ul class="content_yuzhou" style="height: 16px; top: 0px; left: -400px; position: absolute; width: 999999px; z-index:-1;">             <li style="width: 100px; height: 16px; float: left; display: block; " class="ks-switchable-panel-internal1639">&nbsp;</li>             <li style="width: 100px; height: 16px; float: left; display: block; " class="ks-switchable-panel-internal1639">&nbsp;</li>             <li style="width: 100px; height: 16px; float: left; display: block; " class="ks-switchable-panel-internal1639">&nbsp;</li>             <li style="width: 100px; height: 16px; float: left; display: block; " class="ks-switchable-panel-internal1639">&nbsp;</li>             <li style="width: 100px; height: 16px; float: left; display: block; " class="ks-switchable-panel-internal1639">&nbsp;</li>             <li style="width: 100px; height: 16px; float: left; display: block; " class="ks-switchable-panel-internal1639">&nbsp;</li>             <li style="width: 100px; height: 16px; float: left; display: block; " class="ks-switchable-panel-internal1639">&nbsp;</li>             <li style="width: 100px; height: 16px; float: left; display: block; " class="ks-switchable-panel-internal1639">&nbsp;</li>             <li style="width: 100px; height: 16px; float: left; background-image: url(http://img03.taobaocdn.com/imgextra/i3/913570860/T2cSC4XFJXXXXXXXXX_!!913570860.png);  display: block; background-position: 50% 50%; background-repeat: no-repeat no-repeat; " class="ks-switchable-panel-internal1639">&nbsp;</li>           </ul></div>          </div>       </div>     </div>   </div>