淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2503|回复: 8
收起左侧

店招CSS代码,弹出效果

[复制链接]
  • TA的每日心情
    臭美
    2016-6-2 08:39
  • 签到天数: 59 天

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    179

    帖子

    6968

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6968

    淘宝皇冠店美工天猫美工

    QQ
    发表于 2016-6-13 17:38:03 | 显示全部楼层 |阅读模式
    店招CSS代码,为什么所有分类的弹出效果和右侧弹出效果不同呀,鼠标滑过的效果也不同,哪里错了呀?这个红色底,在所有分类这里是鼠标不在的时候才出来,右侧那里是放上去就出来的,说的可能不是很明白·····
    你们下载弄上去看看就知道了,求大神呀

    1. .skin-box-bd .menu-list,.skin-box-bd .menu-list .menu,.menu-list .menu-selected,.menu-list .menu-selected .link,.skin-box-bd .menu-list .link,.menu-list .menu-selected .link,.menu-list .link,.skin-box-bd .menu-list .menu-selected .link .title,.skin-box-bd .menu-list .menu-hover .link,.menu-list .menu-hover .link,.all-cats,.skin-box-bd .all-cats .link,.skin-box-bd .popup-content .cats-tree,.popup-content .cats-tree .snd-pop-inner,.skin-box-bd .popup-content .cats-tree .cat-hd-hover,.skin-box-bd .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd-hover{background:none transparent;}
    2. .popup-content .cats-tree .snd-pop{left:-9999px;top:-9999px;overflow:hidden;}/*无需修改,可不用删除说明*/
    3. .popup-content .cats-tree .cat .snd-pop{width:0px;-webkit-transition:width 1.13s ease;transition:width 1.13s ease;-o-transition:width 1.13s ease;-moz-transition:width 1.13s ease;}/*向右展开,向下展开请全部CSS的把width改为height ,高度宽度后面数值为展开所用时间,值越小越快,越大越慢*/
    4. .popup-content .cats-tree .cat-hd-hover .snd-pop{width:300px;}/*数值请填写自己设置的三级宽高度大的数值*/



    5. .skin-box-bd{height:30px;overflow:hidden;background:none transparent;}
    6. /*右侧内容弹出层图标*/.menu-list .link .popup-icon{margin-top:8px;display:block;background-position:left 0px;background-repeat:no-repeat;width:14px;height:14px;background-image:url(//gdp.alicdn.com/L1/142/421828205/modules/tshop-pbsm-shop-nav-ch/assets/images/d-navicon.gif);}
    7. /*所有分类图标*/.all-cats .link .popup-icon{margin-top:8px;display:block;background-position:left 0px;background-repeat:no-repeat;width:14px;height:14px;background-image:url(//gdp.alicdn.com/L1/142/421828205/modules/tshop-pbsm-shop-nav-ch/assets/images/d-navicon.gif);}
    8. .skin-box-bd .menu-list{width:auto;height:30px;margin-left:0px;}
    9. /*所有分类文字*/.skin-box-bd .all-cats a.link span.title{font-size:13px;line-height:30px;height:30px;float:left;color:#d3540d;width:100px;display:block;*zoom:1;}
    10. /*所有分类背景色*/.skin-box-bd .all-cats{padding:0;_width:250px;max-width:250px;float:left;border-radius:0px;background:url(//gdp.alicdn.com/imgextra/i1/2123956509/TB2FYczdVXXXXboXXXXXXXXXXXX_!!2123956509.jpg) -150px 0px no-repeat;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;}
    11. /*所有分类划过背景色*/.skin-box-bd .all-cats-hover{border-radius:0px;background:url(//gdp.alicdn.com/imgextra/i2/2123956509/TB2Ci3idVXXXXbbXpXXXXXXXXXX_!!2123956509.jpg) 0px 0px no-repeat;}
    12. /*所有分类划过文字色*/.skin-box-bd .all-cats-hover a.link span.title{color:#FFF;font-size:13px;font-weight:normal;line-height:30px;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;}
    13. /*二级分割线*/.skin-box-bd .all-cats-popup .cats-tree .fst-cat{border-bottom:0px solid #000;}

    14. /*三级滑过背景色*/ .skin-box-bd .all-cats-popup .cats-tree .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd-hover{background-color:#f68e54;}
    15. /*三级滑过文字色*/.skin-box-bd .all-cats-popup .cats-tree .snd-pop .snd-pop-inner .fst-cat-bd .snd-cat .snd-cat-hd-hover a.snd-cat-name{color:#fff;}
    16. .skin-box-bd .menu-list .menu{height:30px;width:auto;float:left;}
    17. .skin-box-bd .menu-list .menu{border-radius:0px;background:url(//gdp.alicdn.com/imgextra/i1/2123956509/TB2FYczdVXXXXboXXXXXXXXXXXX_!!2123956509.jpg) -150px 0px no-repeat;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;}
    18. .skin-box-bd .menu-list .menu-hover{border-radius:0px;background:url(//gdp.alicdn.com/imgextra/i2/2123956509/TB2Ci3idVXXXXbbXpXXXXXXXXXX_!!2123956509.jpg) 0px 0px no-repeat;}
    19. .skin-box-bd .menu-list .menu .title{font-size:13px;font-weight:normal;line-height:30px;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;}
    20. .skin-box-bd .menu-list .link{height:30px;border:0;}
    21. .skin-box-bd .menu-list .menu:hover .title{color:#FFF;}
    22. .skin-box-bd .menu-list .link .title{-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;color:#d3540d;font-weight:normal;}
    23. .skin-box-bd .menu-list .menu-selected .link .title{color:#d3540d;}
    24. .skin-box-bd .menu-list .menu-selected:hover .link .title{color:#d3540d;}
    25. .skin-box-bd .menu-list .menu,.all-cats .link{border:0px;}

    26. /*弹出层背景和参数*/

    27. /*背景色*/ .skin-box-bd .all-cats-popup{width:150px;padding-top:0px;}
    28. /*二级滑过背景色特效*/.cats-tree .fst-cat{transition:all 0.3s ease 0s;width:150px;background:url(//gdp.alicdn.com/imgextra/i2/2123956509/TB2Ci3idVXXXXbbXpXXXXXXXXXX_!!2123956509.jpg) 150px 0px no-repeat;}
    29. /*二级滑过背景色*/  .skin-box-bd .all-cats-popup .cat-hd-hover{width:150px;background:url(//gdp.alicdn.com/imgextra/i2/2123956509/TB2Ci3idVXXXXbbXpXXXXXXXXXX_!!2123956509.jpg) 150px 0px no-repeat;}
    30. /*二级文字色*/.popup-content .fst-cat .cat-name{width:115px;text-align:center;font-weight:normal;color:#d3540d;}
    31. /*二级滑过文字色*/.skin-box-bd .all-cats-popup .cat-hd-hover .fst-cat-hd a.fst-cat-name{color:#FFF;}


    32. /*右侧弹出背景颜色*/.skin-box-bd .popup-content{width:150px;background:url(https://img.alicdn.com/imgextra/i3/847360178/TB2BzQ7qpXXXXaIXXXXXXXXXXXX_!!847360178.png) no-repeat bottom right #000;padding-top:0px;padding-bottom:60px;border-radius:5px;opacity:0.9;border:1px solid #C50D25;}
    33. /*右侧弹出背景滑过颜色特效*/.skin-box-bd .popup-content .menu-popup-cats .sub-cat{-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;width:150px;background:url(//gdp.alicdn.com/imgextra/i2/2123956509/TB2Ci3idVXXXXbbXpXXXXXXXXXX_!!2123956509.jpg) 150px 0px no-repeat;}
    34. /*右侧弹出背景滑过颜色*/.skin-box-bd .popup-content .menu-popup-cats .sub-cat-hover{width:150px;background:url(//gdp.alicdn.com/imgextra/i2/2123956509/TB2Ci3idVXXXXbbXpXXXXXXXXXX_!!2123956509.jpg) 0px 0px no-repeat;}
    35. /*右侧弹出文字颜色与参数*/.skin-box-bd .popup-content .menu-popup-cats .sub-cat .cat-name{width:140px;text-align:center;font-weight:normal;color:#d3540d;}
    36. /*右侧弹出文字滑过颜色*/.skin-box-bd .popup-content .menu-popup-cats .sub-cat-hover .cat-name{color:#FFF;}
    复制代码


  • TA的每日心情
    加油
    半小时前
  • 签到天数: 104 天

    连续签到: 3 天

    [LV.6]渐入佳境

    1

    主题

    142

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16827

    发表于 2016-6-14 10:15:29 | 显示全部楼层
    请问楼主  用开通CSS权限吗?

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


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

  • TA的每日心情
    臭美
    2016-6-2 08:39
  • 签到天数: 59 天

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    179

    帖子

    6968

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6968

    淘宝皇冠店美工天猫美工

    QQ
     楼主| 发表于 2016-6-14 10:21:40 | 显示全部楼层
    翱翔 发表于 2016-6-14 10:15
    请问楼主  用开通CSS权限吗?

    不用,直接用就好

  • TA的每日心情
    加油
    半小时前
  • 签到天数: 104 天

    连续签到: 3 天

    [LV.6]渐入佳境

    1

    主题

    142

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16827

    发表于 2016-6-14 10:24:32 | 显示全部楼层
    确实不一样
    111.jpg

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


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

  • TA的每日心情
    臭美
    2016-11-1 11:11
  • 签到天数: 77 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    159

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    15416

    发表于 2016-6-14 10:40:35 | 显示全部楼层
    不明所以

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


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

  • TA的每日心情
    大哭
    2016-10-18 16:39
  • 签到天数: 7 天

    连续签到: 1 天

    [LV.3]武林新秀

    0

    主题

    12

    帖子

    1486

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1486

    发表于 2016-6-20 12:11:40 | 显示全部楼层
    赞赞赞

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


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

  • TA的每日心情
    求抱抱
    2016-11-7 10:07
  • 签到天数: 31 天

    连续签到: 1 天

    [LV.5]略有小成

    2

    主题

    180

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    20350

    最佳新人

    QQ
    发表于 2016-6-20 13:36:56 | 显示全部楼层
    找一个淘宝导航在线生成就好了···

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


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

  • TA的每日心情
    加油
    2016-9-23 16:12
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初学乍练

    0

    主题

    1

    帖子

    223

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    223

    发表于 2016-6-24 08:29:00 | 显示全部楼层
    新手表示只围观没意见。

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


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

    该用户从未签到

    0

    主题

    4

    帖子

    220

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    220

    发表于 2016-7-6 16:16:57 | 显示全部楼层
    也可以用 淘宝组件里面的 弹出层来做 不需要开通样式也可以的~

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-5 10:33 , Processed in 0.136830 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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