最新公告
  • 欢迎您光临猿码素材,登录获取更多优质资源!立即加入我们
  • css3鼠标悬停帮助图标显示图片文字提示框源码

    css3鼠标悬停帮助图标显示图片文字提示框源码 最后编辑:2020-07-14
    增值服务: 自动提取 使用说明 安装指导 环境配置二次开发BUG修复

    效果演示

    css3鼠标悬停帮助图标显示图片文字提示框一共有三种效果,分别是纯文字,HTML代码和图片,当鼠标悬停到问号图标的时候,就会显示提示框,分别显示对应的内容。

    样式参考

    @charset "utf-8";
    *{margin:0;padding:0;}
    html{background-color:#eaf0f2;}
    body{font:14px/1.4 'Arial', 'Helvetica', sans-serif;color:#5b6469;}
    a, a:visited {outline:none;color:#389dc1;}
    a:hover{text-decoration:none;}
    p{margin-bottom:20px;}
    p:last-child{margin-bottom:0;}
    
    /*-------------------------The color buttons
    --------------------------*/
    ul{list-style:none;text-align:center;margin-bottom:48px;}
    ul li{display:inline-block;margin:0 8px;}
    ul li:hover{opacity:0.9;}
    ul li a{color:#fff !important;text-decoration:none !important;font-size:15px;font-weight:bold;display:inline-block;padding:6px 14px;border-radius:3px;box-shadow:1px 1px 1px rgba(0,0,0,0.1);}
    ul li:nth-child(1) a{background-color:#6bb9e1;}
    ul li:nth-child(2) a{background-color:#ec7164;}
    ul li:nth-child(3) a{background-color:#6ad3c3;}
    
    /* content */
    #content{background-color:#FFF;border-radius:4px;padding:40px;margin:0 auto;max-width:600px;position:relative;margin:0 auto 100px;}
    /* help-tip */
    .help-tip{position:absolute;top:18px;right:18px;text-align:center;background-color:#BCDBEA;border-radius:50%;width:24px;height:24px;font-size:14px;line-height:26px;cursor:default}
    .help-tip:before{content:'?';font-weight:bold;color:#fff;}
    .help-tip:hover p{display:block;transform-origin:100% 0%;-webkit-animation:fadeIn 0.3s ease-in-out;animation:fadeIn 0.3s ease-in-out;}
    .help-tip p{display:none;text-align:left;background-color:#1E2021;padding:20px;width:300px;position:absolute;border-radius:3px;box-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);right:-4px;color:#FFF;font-size:13px;line-height:1.4;}
    .help-tip p:before{position:absolute;content:'';width:0;height:0;border:6px solid transparent;border-bottom-color:#1E2021;right:10px;top:-12px;}
    .help-tip p:after{width:100%;height:40px;content:'';position:absolute;top:-40px;left:0;}
    
    @-webkit-keyframes fadeIn {
    	0% { 
    		opacity:0; 
    		transform:scale(0.6);
    	}
    
    	100% {
    		opacity:100%;
    		transform:scale(1);
    	}
    }
    
    @keyframes fadeIn {
    	0% { opacity:0; }
    	100% { opacity:100%; }
    }

     

    猜你在找

    本站所有资源均由网友共享,仅用于参考学习用,请勿直接商用,如有侵权,请联系网站客服删除相关资源。若由于商用引起版权纠纷,一切责任均由使用者承担。
    猿码素材 » css3鼠标悬停帮助图标显示图片文字提示框源码

    常见问题FAQ

    如果资源链接失效了怎么办?
    本站用户分享的所有资源都有自动备份机制,如果资源链接失效,请联系本站客服QQ:2580505920更新资源地址。
    如果用户分享的资源与描述不符怎么办?
    可以联系客服QQ:2580505920,如果要求合理可以安排退款或者退赞助积分。
    如何分享个人资源获取赞助积分或其他奖励?
    本站用户可以分享自己的资源,但是必须保证资源没有侵权行为。点击个人中心,根据操作填写并上传即可。资源所获收益完全归属上传者,每周可申请提现一次。
    如果您发现了本资源有侵权行为怎么办?
    及时联系客服QQ:2580505920,核实予以删除。
    • 2019-05-24Hi,初次和大家见面了,请多关照!

    发表评论

    Hi, 如果你对这款资源有疑问,可以在上面留言哦!

    联系发布者
    • 147会员总数(位)
    • 67资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 244稳定运行(天)

    欢迎加入猿码素材,上传源码收益100%归作者所有!

    立即加入 了解详情
  • © 2020 yuanmasucai.com - 猿码素材 & Geekerstar. All rights reserved 蜀ICP备15019641号-4

  • XML地图 | 站长导航
         
    成为赞助用户享有更多特权立即升级