淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2848|回复: 8
打印 上一主题 下一主题
收起左侧

店招CSS代码,弹出效果

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

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    179

    帖子

    7068

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    7068

    淘宝皇冠店美工天猫美工

    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;}
    复制代码


    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 分享分享 分享淘帖 支持支持 反对反对
  • TA的每日心情
    加油
    2017-3-12 11:10
  • 签到天数: 121 天

    连续签到: 1 天

    [LV.7]炉火纯青

    1

    主题

    142

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    19754

    沙发
    发表于 2016-6-14 10:15:29 | 只看该作者
    请问楼主  用开通CSS权限吗?

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


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

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

    连续签到: 1 天

    [LV.5]略有小成

    12

    主题

    179

    帖子

    7068

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    7068

    淘宝皇冠店美工天猫美工

    QQ
    板凳
     楼主| 发表于 2016-6-14 10:21:40 | 只看该作者
    翱翔 发表于 2016-6-14 10:15
    请问楼主  用开通CSS权限吗?

    不用,直接用就好

  • TA的每日心情
    加油
    2017-3-12 11:10
  • 签到天数: 121 天

    连续签到: 1 天

    [LV.7]炉火纯青

    1

    主题

    142

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    19754

    地板
    发表于 2016-6-14 10:24:32 | 只看该作者
    确实不一样

    111.jpg (33.95 KB, 下载次数: 2)

    111.jpg

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


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

  • TA的每日心情
    思考
    2017-3-7 09:29
  • 签到天数: 80 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    159

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16040

    5#
    发表于 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

    6#
    发表于 2016-6-20 12:11:40 | 只看该作者
    赞赞赞

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


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

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

    连续签到: 1 天

    [LV.5]略有小成

    2

    主题

    191

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24519

    最佳新人

    QQ
    7#
    发表于 2016-6-20 13:36:56 | 只看该作者
    找一个淘宝导航在线生成就好了···

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


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

    该用户从未签到

    0

    主题

    1

    帖子

    323

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    323

    8#
    发表于 2016-6-24 08:29:00 | 只看该作者
    新手表示只围观没意见。

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


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

    该用户从未签到

    0

    主题

    4

    帖子

    220

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    220

    9#
    发表于 2016-7-6 16:16:57 | 只看该作者
    也可以用 淘宝组件里面的 弹出层来做 不需要开通样式也可以的~

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


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

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

    本版积分规则

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

    GMT+8, 2017-3-24 14:49 , Processed in 0.116211 second(s), 24 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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