最新公告
  • 新注册用户请前往个人中心绑定邮箱以便接收相关凭证邮件!!!点击前往个人中心
  • 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

    购买后由于自身原因导致无法使用可以退款吗?
    由于源码的可复制性,原则上购买后是不提供退款服务的,购买前请务必联系客服或技术支持并提供必要信息以确认您是否能够使用该源码。另外可以点击右侧获取本地试用版来自行验证代码可行性。购买之前一定要考虑清楚。
    源码可以拿来商用吗?
    允许商用,但是使用之前请仔细评估风险,由于使用不当造成的一切后果本站不承担责任。
    源码的更新周期是多久?
    欢迎用户积极反馈Bug及新需求,有Bug的话会及时更新,有新功能也会定期更新。
    购买后可以开发票吗?
    由于外部因素,最近购买无法开具发票,请考虑清楚后再购买
    • 2019-05-24Hi,初次和大家见面了,请多关照!

    发表评论

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

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

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

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

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