淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 26839|回复: 93
收起左侧

【渔舟】无需CSS权限仿七格格鼠标经过效果代码

  [复制链接]
  • TA的每日心情
    抱抱
    前天 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    61

    主题

    154

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51879

    QQ
    发表于 2015-7-2 12:47:18 | 显示全部楼层 |阅读模式
    好久没有发帖了,这次渔舟给大家带来的是仿七格格的css3鼠标经过效果。 依然为原创,帖子提供给大家学习参考,重要的是思路和方法,转载请注明出处。废话少说,有图有真相。
    02.gif
    为了大家都能打开,图片压缩了。 需要看原始效果的,可以移步到这里查看 http://shop114199070.taobao.com/p/rd078323.htm

    1. <div style="width:243px; height:350px; position:relative; background:#f00; overflow:hidden;">
    2.   <div class="search-menu" style="width:243px; height:50px;border:0; padding:0; top:0; left:0; background:none transparent;">
    3.     <div class="J_TWidget" data-widget-type="Slide" data-widget-config="{'navCls':'yz','activeTriggerCls':'xm-musicplayer-list','interval':0.01}">
    4.       <div class="yz">
    5.         <div class="search-menu" style="width:243px; height:500px;border:0; padding:0; left:0; display:block;transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;background:none transparent;">
    6.           <div style="width:243px; height:421px; background:url(http://img.alicdn.com/imgextra/i2/2272660937/TB2kPpVdXXXXXXNXpXXXXXXXXXX_!!2272660937.gif);"></div>
    7.           <div style="width:243px; height:57px; background:rgba(0,0,0,0.7);"> </div>
    8.         </div>
    9.       </div>
    10.     </div>
    11.   </div>
    12. </div>
    复制代码
    之前很多朋友发的是利用的hover伪类来制作的,但是官方能用的hover伪类确实有限,所以特此做了个利用Slide来做的鼠标经过效果,有效避开了hover,依然能模拟出hover的效果。
    思路就是这样,我们一起来看一下里面的参数如何修改使用呢?
    请看下图:
    未标题-1.jpg

    注意:这张图片后来发现有一处错误,使用footer-more-trigger的时候,因为优先级的关系,无法呈现效果。 所以请将footer-more-trigger改成search-menu。 其他地方看图更改即可。

    再次声明:仅供学习交流,渔舟不提供指导教学,所以请不要问店内客服或者本人QQ,见谅!!!

    评分

    参与人数 14美工币 +443 收起 理由
    洋气小香风 + 8 原创!
    lmymali + 10
    董翠 + 2 感谢分享!
    snrtmnmnyk + 1 很给力!
    青丝菌 + 4 天猫呢?好像没效果
    林明赞 + 20 原创!
    wymacs + 20
    Rain + 100 啥时候出设计教程呢,看好你~
    leike + 18 很给力!
    gxzhou + 100 赞一个!
    峰生水起之林 + 100 很给力!
    誓言芜罪 + 20 原创!
    蓝国枫 + 20 赞一个!
    风一样的男子丿 + 20 很给力!

    查看全部评分

    本帖被以下淘专辑推荐:

  • TA的每日心情
    抱抱
    1 小时前
  • 签到天数: 617 天

    连续签到: 6 天

    [LV.9]已臻大成

    42

    主题

    1234

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    117116

    天猫美工最佳新人热心会员

    发表于 2015-7-2 12:48:43 | 显示全部楼层
    沙发  支持大神

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


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

  • TA的每日心情
    大哭
    2016-11-22 10:07
  • 签到天数: 207 天

    连续签到: 1 天

    [LV.7]炉火纯青

    4

    主题

    697

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18441

    最佳新人热心会员

    发表于 2015-7-2 13:11:46 | 显示全部楼层
    板凳拿下~
    我可以划船不用浆,我可以扬帆没有风向,因为我这一生,全靠浪o(∩_∩)o
  • TA的每日心情
    大哭
    2016-9-18 15:37
  • 签到天数: 174 天

    连续签到: 1 天

    [LV.7]炉火纯青

    20

    主题

    303

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24845

    QQ
    发表于 2015-7-2 13:18:26 | 显示全部楼层
    哈哈   前排吗?
    一直在模仿,总在用脑想
  • TA的每日心情

    2016-4-2 10:50
  • 签到天数: 195 天

    连续签到: 1 天

    [LV.7]炉火纯青

    20

    主题

    511

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27557

    发表于 2015-7-2 13:35:12 | 显示全部楼层
    渔舟大人依然这么牛XX

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


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

  • TA的每日心情
    臭美
    2015-9-30 09:04
  • 签到天数: 224 天

    连续签到: 3 天

    [LV.7]炉火纯青

    5

    主题

    495

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    76999

    天猫美工最佳新人热心会员

    发表于 2015-7-2 13:38:35 | 显示全部楼层
    支持大神,终于有大神出现了!!

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


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

  • TA的每日心情
    思考
    2015-10-5 16:32
  • 签到天数: 26 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    5

    主题

    247

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27725

    发表于 2015-7-2 13:41:25 | 显示全部楼层
    6666666666666666666666

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


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

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

    连续签到: 1 天

    [LV.1]初学乍练

    10

    主题

    486

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    89917

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

    发表于 2015-7-2 13:52:17 | 显示全部楼层
    感谢分享啊~

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


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

  • TA的每日心情

    2016-10-26 14:13
  • 签到天数: 325 天

    连续签到: 1 天

    [LV.8]自成一派

    15

    主题

    816

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    93422

    宣传达人

    QQ
    发表于 2015-7-2 13:57:36 | 显示全部楼层
    大神这一看很久没冒泡了啊,差不多一年了啊

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


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

  • TA的每日心情
    抱抱
    2015-8-28 09:03
  • 签到天数: 75 天

    连续签到: 2 天

    [LV.6]渐入佳境

    4

    主题

    236

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16452

    发表于 2015-7-2 14:03:43 | 显示全部楼层
    支持一下哦
    哈哈哈哈哈
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-3 10:28 , Processed in 0.194506 second(s), 39 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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