淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3019|回复: 18
收起左侧

[装修相关] 【京东装修】鼠标经过换图?

[复制链接]
  • TA的每日心情
    臭美
    2016-5-25 16:41
  • 签到天数: 233 天

    连续签到: 1 天

    [LV.7]炉火纯青

    18

    主题

    265

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    35186

    天猫美工最佳新人

    QQ
    发表于 2015-6-11 09:13:36 | 显示全部楼层 |阅读模式
    1000美工币
    各位早!           如题,最近在装修京东,发现京东好变态,好多东西在DW做好之后,放到后台就没效果了, QQ截图20150611091159.png 后来找到了原因,如下图 QQ截图20150611090915.png

       敢问哪位有经验可以解决??
       我想要的效果是鼠标经过可以切换图片(而且是gif的)

    兼职美工,计件服务或包月服务,有意请加Q详聊:2211752372,加我时请注明是淘宝美工论坛上看到我的!
  • TA的每日心情
    不爽
    2013-8-24 09:11
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    10

    主题

    486

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    90357

    热心会员最佳新人活跃会员

    发表于 2015-6-11 09:13:37 | 显示全部楼层
    本帖最后由 感谢豆芽 于 2015-6-11 10:14 编辑
    1. <style>

    2. .test{ background:url(http://img01.taobaocdn.com/imgextra/i1/377425589/TB2XNWEdXXXXXX3XpXXXXXXXXXX_!!377425589.jpg) no-repeat;height:320px;width:240px;overflow:hidden; }
    3. .test:hover{ background-position:-240px 0;}


    4. </style>


    5. <div class="test">

    6. </div>
    复制代码


    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    回复

    使用道具 举报

  • TA的每日心情
    加油
    2016-2-19 10:16
  • 签到天数: 112 天

    连续签到: 1 天

    [LV.6]渐入佳境

    3

    主题

    410

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23943

    最佳新人热心会员

    QQ
    发表于 2015-6-11 09:34:28 | 显示全部楼层
    请楼下大神回答吧
    我就看看不说话
    回复

    使用道具 举报

  • TA的每日心情
    抱抱
    2016-10-14 17:55
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    585

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23827

    发表于 2015-6-11 09:38:24 | 显示全部楼层
    我有哈哈 http://shop.suning.com/70074106/index.html 东东和小猫里的代码可以通用的

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    回复

    使用道具 举报

  • TA的每日心情
    臭美
    2016-5-25 16:41
  • 签到天数: 233 天

    连续签到: 1 天

    [LV.7]炉火纯青

    18

    主题

    265

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    35186

    天猫美工最佳新人

    QQ
     楼主| 发表于 2015-6-11 09:41:59 | 显示全部楼层
    风卷 发表于 2015-6-11 09:38
    我有哈哈 http://shop.suning.com/70074106/index.html 东东和小猫里的代码可以通用的

    什么鬼???在哪???

    兼职美工,计件服务或包月服务,有意请加Q详聊:2211752372,加我时请注明是淘宝美工论坛上看到我的!
    回复

    使用道具 举报

  • TA的每日心情
    委屈
    2016-1-2 15:21
  • 签到天数: 222 天

    连续签到: 1 天

    [LV.7]炉火纯青

    41

    主题

    1121

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    41680

    天猫美工淘宝皇冠店美工最佳新人热心会员活跃会员优秀版主

    QQ
    发表于 2015-6-11 09:56:37 | 显示全部楼层
    风卷 发表于 2015-6-11 09:38
    我有哈哈 http://shop.suning.com/70074106/index.html 东东和小猫里的代码可以通用的

    好喜欢你导航的特效。。。求分享

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    回复

    使用道具 举报

  • TA的每日心情

    2016-10-29 11:47
  • 签到天数: 340 天

    连续签到: 1 天

    [LV.8]自成一派

    2

    主题

    60

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    63764

    最佳新人

    发表于 2015-6-11 09:58:48 | 显示全部楼层
    1. <style>
    2. .user_vusir_tp21 {margin-bottom:10px;}
    3. .user_vusir_tp21 .user-zhkj{width:968px;height:560px;overflow:hidden;padding:10px;border:1px solid #dedede;background:#fff;}
    4. .user_vusir_tp21 .user-zhkj .dz-1,.user_vusir_tp21 .user-zhkj .dz-2,.user_vusir_tp21 .user-zhkj .dz-3,.user_vusir_tp21 .user-zhkj .dz-4,.user_vusir_tp21 .user-zhkj .dz-5{left:-200%;width:100%;height:100%;filter:progid\"\"XImageTransform.Microsoft.Alpha(opacity=80);opacity:0.8;position:absolute;top:0px;transition:all 1s ease 0s;-moz-transition:all 1s ease 0s;-webkit-transition:all 1s ease 0s;}
    5. .user_vusir_tp21 .user-zhkj .dz-3,.user_vusir_tp21 .user-zhkj .dz-5{left:0px;filter:progid\"\"XImageTransform.Microsoft.Alpha(opacity=0);opacity:0;}
    6. .user_vusir_tp21 .user-zhkj .img-1,.user_vusir_tp21 .user-zhkj .img-2,.user_vusir_tp21 .user-zhkj .img-3,.user_vusir_tp21 .user-zhkj .img-4,.user_vusir_tp21 .user-zhkj .img-5{background-repeat:no-repeat;background-position:center center;}
    7. .user_vusir_tp21 .user-zhkj .img-1 a,.user_vusir_tp21 .user-zhkj .img-2 a,.user_vusir_tp21 .user-zhkj .img-3 a,.user_vusir_tp21 .user-zhkj .img-4 a,.user_vusir_tp21 .user-zhkj .img-5 a{display:block;width:100%;height:100%;}
    8. .user_vusir_tp21 .user-zhkj .bigleft,.user_vusir_tp21 .user-zhkj .bigright,.user_vusir_tp21 .user-zhkj .top,.user_vusir_tp21 .user-zhkj .bottom,.user_vusir_tp21 .user-zhkj .bottomright,.user_vusir_tp21 .user-zhkj .smallleft,.user_vusir_tp21 .user-zhkj .smallright{overflow:hidden;position:relative;}
    9. .user_vusir_tp21 .user-zhkj .bigleft:hover .dz,.user_vusir_tp21 .user-zhkj .bottom:hover .dz,.user_vusir_tp21 .user-zhkj .bottomright:hover .dz,.user_vusir_tp21 .user-zhkj .smallleft:hover .dz,.user_vusir_tp21 .user-zhkj .smallright:hover .dz{display:block;left:0px;}
    10. .user_vusir_tp21 .user-zhkj .bigleft:hover .dz-3,.user_vusir_tp21 .user-zhkj .bottom:hover .dz-3,.user_vusir_tp21 .user-zhkj .bottomright:hover .dz-3,.user_vusir_tp21 .user-zhkj .smallleft:hover .dz-3,.user_vusir_tp21 .user-zhkj .smallright:hover .dz-3,.user_vusir_tp21 .user-zhkj .bigleft:hover .dz-5,.user_vusir_tp21 .user-zhkj .bottom:hover .dz-5,.user_vusir_tp21 .user-zhkj .bottomright:hover .dz-5,.user_vusir_tp21 .user-zhkj .smallleft:hover .dz-5,.user_vusir_tp21 .user-zhkj .smallright:hover .dz-5{filter:progid\"\"XImageTransform.Microsoft.Alpha(opacity=100);opacity:1;}
    11. .user_vusir_tp21 .user-zhkj .bigleft{float:left;width:488px;height:560px;}
    12. .user_vusir_tp21 .user-zhkj .bigleft .dz-1{}
    13. .user_vusir_tp21 .user-zhkj .bigleft .img-1{width:471px;height:560px;}
    14. .user_vusir_tp21 .user-zhkj .bigright{float:right;width:480px;height:560px;}
    15. .user_vusir_tp21 .user-zhkj .bigright .top{height:370px;width:480px;}
    16. .user_vusir_tp21 .user-zhkj .bigright .top .smallleft{float:left;width:230px;height:180px;margin-left:10px;}
    17. .user_vusir_tp21 .user-zhkj .bigright .top .smallleft .dz-2{}
    18. .user_vusir_tp21 .user-zhkj .bigright .top .smallleft .img-2{width:230px;height:180px;}
    19. .user_vusir_tp21 .user-zhkj .bigright .top .smallright{float:right;width:230px;height:370px;}
    20. .user_vusir_tp21 .user-zhkj .bigright .top .smallright .dz-3{}
    21. .user_vusir_tp21 .user-zhkj .bigright .top .smallright .img-3{width:230px;height:370px;}
    22. .user_vusir_tp21 .user-zhkj .bigright .top .bottom{width:230px;height:180px;margin-left:10px;margin-top:10px;float:left;}
    23. .user_vusir_tp21 .user-zhkj .bigright .top .bottom .dz-4{}
    24. .user_vusir_tp21 .user-zhkj .bigright .top .bottom .img-4{width:230px;height:180px;}
    25. .user_vusir_tp21 .user-zhkj .bigright .bottomright{width:470px;height:180px;margin-left:10px;margin-top:10px;float:right;}
    26. .user_vusir_tp21 .user-zhkj .bigright .bottomright .dz-5{}
    27. .user_vusir_tp21 .user-zhkj .bigright .bottomright .img-5{width:470px;height:180px;}


    28. </style>
    29. <div class="user_vusir_tp21" title="www.vusir.com">
    30.     <div class="mc" style=";">
    31.                 <div class="user-zhkj">
    32.         <div class="bigleft">
    33.                 <a href="#www.vusir.com" class="dz-1 dz" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t952/126/16309784/20559/e1454970/54e0bf98N23501945.png"></a>
    34.                 <div class="img-1">
    35.                         <a href="#www.vusir.com" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t946/113/16391945/47118/bd8747fc/54e0bf98Ncc2b6d13.jpg"></a>
    36.                 </div>
    37.         </div>
    38.         <div class="bigright">
    39.                 <div class="top">
    40.                         <div class="smallleft">
    41.                                 <a href="#www.vusir.com" class="dz-2 dz" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t940/101/17724274/7351/294b662d/54e0bf98N85c44493.png"></a>
    42.                                 <div class="img-2">
    43.                                         <a href="#www.vusir.com" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t949/200/15535942/9946/97b8c47c/54e0bf98N840a013a.jpg"></a>
    44.                                 </div>
    45.                         </div>
    46.                         <div class="smallright">
    47.                                 <a href="#www.vusir.com" class="dz-3 dz" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t937/133/16398339/37043/ae3ccedc/54e0bf98N03fb9e12.jpg"></a>
    48.                                 <div class="img-3">
    49.                                         <a href="#www.vusir.com" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t955/200/22749930/35438/9d5308c5/54e0bf98Ne9fca60b.jpg"></a>
    50.                                 </div>
    51.                         </div>
    52.                         <div class="bottom">
    53.                                 <a href="#www.vusir.com" class="dz-4 dz" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t946/114/17980388/6923/dcf6145a/54e0bf98N5033f21a.png"></a>
    54.                                 <div class="img-4">
    55.                                         <a href="#www.vusir.com" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t940/100/19371753/9468/b095425/54e0bf98N2d8e73c5.jpg"></a>
    56.                                 </div>
    57.                         </div>
    58.                 </div>
    59.                 <div class="bottomright">
    60.                         <a href="#www.vusir.com" class="dz-5 dz" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t937/132/20741269/14867/dc5a0520/54e0bf98N9d89aba4.jpg"></a>
    61.                         <div class="img-5">
    62.                                 <a href="#www.vusir.com" target="_blank"><img src="http://img11.360buyimg.com/cms/jfs/t949/199/13696100/11900/aef3681f/54e0bf98Nfbf2e60a.jpg"></a>
    63.                         </div>
    64.                 </div>
    65.         </div>
    66. </div>

    67.     </div>
    68. </div>



    试下吧?

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    回复

    使用道具 举报

  • TA的每日心情
    不爽
    2013-8-24 09:11
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    10

    主题

    486

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    90357

    热心会员最佳新人活跃会员

    发表于 2015-6-11 10:00:38 | 显示全部楼层
    京东最写入的样式名称有限制 自定义样式命名必须以.user为前缀,如.user-banner{}或.user_baner{}或.userbaner{}等等!用hover类写就可以了..

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    回复

    使用道具 举报

  • TA的每日心情
    臭美
    2016-5-25 16:41
  • 签到天数: 233 天

    连续签到: 1 天

    [LV.7]炉火纯青

    18

    主题

    265

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    35186

    天猫美工最佳新人

    QQ
     楼主| 发表于 2015-6-11 10:03:03 | 显示全部楼层
    感谢豆芽 发表于 2015-6-11 10:00
    京东最写入的样式名称有限制 自定义样式命名必须以.user为前缀,如.user-banner{}或.user_baner{}或.userba ...

    嗯嗯!!不过我不会写......有没有样本?我可以自己改

    兼职美工,计件服务或包月服务,有意请加Q详聊:2211752372,加我时请注明是淘宝美工论坛上看到我的!
    回复

    使用道具 举报

  • TA的每日心情
    臭美
    2016-5-25 16:41
  • 签到天数: 233 天

    连续签到: 1 天

    [LV.7]炉火纯青

    18

    主题

    265

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    35186

    天猫美工最佳新人

    QQ
     楼主| 发表于 2015-6-11 10:03:36 | 显示全部楼层

    嗯嗯!!我试试,非常感谢!!!
    兼职美工,计件服务或包月服务,有意请加Q详聊:2211752372,加我时请注明是淘宝美工论坛上看到我的!
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-9 04:11 , Processed in 0.127943 second(s), 24 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表