淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 4228|回复: 26
收起左侧

两个hover块,可以做鼠标经过效果

[复制链接]
  • TA的每日心情

    2016-11-20 16:01
  • 签到天数: 99 天

    连续签到: 1 天

    [LV.6]渐入佳境

    7

    主题

    222

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24577

    最佳新人热心会员

    QQ
    发表于 2015-7-15 20:04:39 | 显示全部楼层 |阅读模式
    先说一个 display:none 的代码,鼠标经过隐藏
    1. .tmsg_app:hover .tmsg_button_more {  display: none;}
    复制代码

    这个用于鼠标经过后隐藏,实例,纯代码请自己测试,不放演示了
    1. <div style="width:auto;height:30px;background:#164D86;top:0;right:0;">
    2.     <div class="tmsg_app" style="height:30px;width:auto;padding:0px;float:left;border-right:1px solid #113961;border-left:1px solid #1C63AC;line-height:30px;padding:0 18px;">
    3.         <div style="width:auto;height:30px;background:#F7F7F7;top:0;right:0;">
    4.             <a style="text-decoration:none;color:#164D86;" target="_blank" href="#">
    5.                 首页
    6.             </a>
    7.         </div>
    8.         <div class="tmsg_button_more" style="height:30px;width:auto;background:#164D86;color:#FFFFFF;top:0;right:auto;">
    9.             <a style="display:block;color:#FFF;text-indent:0;text-align:center;" target="_blank"
    10.             href="#">
    11.                 首页
    12.             </a>
    13.         </div>
    14.     </div>
    15.     <div class="tmsg_app" style="height:30px;width:auto;padding:0px;float:left;border-right:1px solid #113961;border-left:1px solid #1C63AC;line-height:30px;padding:0 18px;">
    16.         <div style="width:auto;height:30px;background:#F7F7F7;top:0;right:0;">
    17.             <a style="text-decoration:none;color:#164D86;" target="_blank" href="#">
    18.                 首页
    19.             </a>
    20.         </div>
    21.         <div class="tmsg_button_more" style="height:30px;width:auto;background:#164D86;color:#FFFFFF;top:0;right:auto;">
    22.             <a style="display:block;color:#FFF;text-indent:0;text-align:center;" target="_blank"
    23.             href="#">
    24.                 首页
    25.             </a>
    26.         </div>
    27.     </div>
    28.     <div class="tmsg_app" style="height:30px;width:auto;padding:0px;float:left;border-right:1px solid #113961;border-left:1px solid #1C63AC;line-height:30px;padding:0 18px;">
    29.         <div style="width:auto;height:30px;background:#F7F7F7;top:0;right:0;">
    30.             <a style="text-decoration:none;color:#164D86;" target="_blank" href="#">
    31.                 首页
    32.             </a>
    33.         </div>
    34.         <div class="tmsg_button_more" style="height:30px;width:auto;background:#164D86;color:#FFFFFF;top:0;right:auto;">
    35.             <a style="display:block;color:#FFF;text-indent:0;text-align:center;" target="_blank"
    36.             href="#">
    37.                 首页
    38.             </a>
    39.         </div>
    40.     </div>
    41. </div>
    复制代码



    上面的是鼠标经过隐藏,下面这个是鼠标经过显示

    1. .footer-more:hover .footer-more-panel {display: block;}
    复制代码
    鼠标经过显示


    1. <div style="width:auto;height:30px;background:#164D86;top:0;right:0;">
    2.     <a href="#" target="_blank" class="item footer-more" style="padding:0;display:block;text-decoration:none;height:30px;line-height:30px;width:auto;border-right:1px solid #113961;border-left:1px solid #1C63AC;">
    3.         <span class="footer-more-panel" style="position:static;color:#164D86;border:0;padding:0 18px;width:auto;right:0;background:#F5F5F5;line-height:30px;">
    4.             首页
    5.         </span>
    6.         <div style="padding:0 18px;color:#FFF;">
    7.             首页
    8.         </div>
    9.     </a>
    10.     <a href="#" target="_blank" class="item footer-more" style="padding:0;display:block;text-decoration:none;height:30px;line-height:30px;width:auto;border-right:1px solid #113961;border-left:1px solid #1C63AC;">
    11.         <span class="footer-more-panel" style="position:static;color:#164D86;border:0;padding:0 18px;width:auto;right:0;background:#F5F5F5;line-height:30px;">
    12.             首页
    13.         </span>
    14.         <div style="padding:0 18px;color:#FFF;">
    15.             首页
    16.         </div>
    17.     </a>
    18.     <a href="#" target="_blank" class="item footer-more" style="padding:0;display:block;text-decoration:none;height:30px;line-height:30px;width:auto;border-right:1px solid #113961;border-left:1px solid #1C63AC;">
    19.         <span class="footer-more-panel" style="position:static;color:#164D86;border:0;padding:0 18px;width:auto;right:0;background:#F5F5F5;line-height:30px;">
    20.             首页
    21.         </span>
    22.         <div style="padding:0 18px;color:#FFF;">
    23.             首页
    24.         </div>
    25.     </a>
    26. </div>
    复制代码


    放了两个效果相同的代码  懂代码的朋友可以自己修改做,可以放图片   鼠标经过换图什么的跟帖回复问题,一一答复



    评分

    参与人数 3美工币 +161 收起 理由
    snrtmnmnyk + 1 感谢分享!
    Rain + 100 赞一个!
    峰生水起之林 + 60 感谢分享!

    查看全部评分

    淘宝代码问题直接加QQ:343063418
  • TA的每日心情

    2016-10-8 17:54
  • 签到天数: 378 天

    连续签到: 1 天

    [LV.9]已臻大成

    5

    主题

    175

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    46616

    发表于 2015-7-15 21:22:54 | 显示全部楼层
    赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞

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


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

  • TA的每日心情

    2016-11-11 14:02
  • 签到天数: 31 天

    连续签到: 1 天

    [LV.5]略有小成

    0

    主题

    56

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29553

    发表于 2015-7-15 22:00:37 | 显示全部楼层
    赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞

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


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

  • TA的每日心情
    加油
    2016-11-28 16:07
  • 签到天数: 174 天

    连续签到: 1 天

    [LV.7]炉火纯青

    2

    主题

    58

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24443

    最佳新人

    QQ
    发表于 2015-7-16 07:54:42 | 显示全部楼层
    第一个好像失效。其实我想知道第一局CSS是找的系统的,还是自己写的
    装逼技术交流群    点它!!!
  • TA的每日心情
    臭美
    2015-9-26 11:52
  • 签到天数: 87 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    90

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52031

    天猫美工最佳新人

    发表于 2015-7-16 09:01:12 | 显示全部楼层

    赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞
    看看你看看我注定碰头,你有你我有我的美梦
  • TA的每日心情
    加油
    2016-3-20 23:54
  • 签到天数: 149 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    150

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    22613

    最佳新人热心会员

    发表于 2015-7-16 10:42:15 | 显示全部楼层
    赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞

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


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

  • TA的每日心情

    2016-11-20 16:01
  • 签到天数: 99 天

    连续签到: 1 天

    [LV.6]渐入佳境

    7

    主题

    222

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24577

    最佳新人热心会员

    QQ
     楼主| 发表于 2015-7-16 14:05:08 | 显示全部楼层
    名字是什么 发表于 2015-7-16 07:54
    第一个好像失效。其实我想知道第一局CSS是找的系统的,还是自己写的

    都是系统的  现在不能自定义CSS

    淘宝代码问题直接加QQ:343063418
  • TA的每日心情
    大哭
    2 小时前
  • 签到天数: 652 天

    连续签到: 1 天

    [LV.9]已臻大成

    37

    主题

    2231

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    138386

    最佳新人热心会员宣传达人活跃会员优秀版主灌水之王

    QQ
    发表于 2015-7-16 14:10:11 | 显示全部楼层
    我就是来水帖的!特么周榜又被顶了好不爽!
  • TA的每日心情
    抱抱
    2016-10-14 17:55
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    585

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23827

    发表于 2015-7-16 15:51:54 | 显示全部楼层
    好 牛 b

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


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

  • TA的每日心情

    2016-4-18 13:29
  • 签到天数: 28 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    1

    主题

    6

    帖子

    6587

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6587

    发表于 2015-7-17 11:49:31 | 显示全部楼层
    谢谢分享~!!

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-7 18:42 , Processed in 0.125801 second(s), 25 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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