效果图：

code：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> 文字渐变色</title>

    <style>

        span {

            background-image: linear-gradient(to right, red, blue);

            -webkit-background-clip: text;

            color: transparent;

        }

        h1{

            position: relative;

            color: yellow;

        }

        h1:before{

            content: attr(text);

            position: absolute;

            z-index: 10;

            color:pink;

            -webkit-mask:linear-gradient(to left, red, transparent );

        }

        .content{

            text-align: center;

            height: 50px;

            line-height: 50px;

            width: 180px;

            margin: 100px auto;

            padding: 5px;

            background-color: rgb(196,0,0);

            color: white;

            font-size: 18px;

            position: relative;

        }

        .content:hover{

            cursor: pointer;

        }

        .content:hover:before{

            content: attr(data-content); /*动态获取数据*/

            position: absolute;

            left: 100%;

            width:200px;

            height: 50px;

            font-size: 18px;

            line-height: 50px;

            background-color: rgb(0,196,0);

            margin-left: 12px;

        }

        .content:hover:after{ /*实现小三角*/

            content: "";

            position: absolute;

            left: 100%;

            top: 50%;

            margin: -10px 0 0 -8px;

            width: 0;

            height: 0;

            border:10px solid  transparent;

            border-right-color: rgb(0,196,0)

        }

        /* 3角型原理 详细可参考https://www.cnblogs.com/shazhou-blog/p/5168740.html */

        #span1 {

            width:0;

            height:0;

            overflow:hidden;

            border:7px solid transparent;

            border-top-color:#2DCB70;

            /* top就是倒三角，bottom就是上三角，left,right类似  */

        }

    </style>

</head>

<body>

    https://blog.csdn.net/fe_dev/article/details/78450844

    <br>

    <span>前端简单说</span>

    <h1 text="前端简单说">前端简单说</h1>

    <div data-content="我是一个悬浮提示框" class="content">鼠标滑过我 我是css</div>

    <span id="span1"></span>

</body>

</html>

css悬浮提示框的更多相关文章

  1. html+css创建提示框

    看到下面的效果了吗? 本来我们站点是用下面的图片做的背景, 但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图: 但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致 ...

  2. echarts饼图如何设置悬浮提示框在中间显示?

    http://www.echartsjs.com/option.html#tooltip.position tooltip.position string, Array, Function   提示框 ...

  3. echarts饼图调整悬浮提示框的位置

    默认是跟随鼠标的位置 通过数组表示提示框浮层的位置,数字设置绝对位置,百分比设置相对位置. position: [10,10] //绝对位置,相对于容器左侧10px,上侧10px position: ...

  4. CSS气泡提示框 可自定义配置箭头

    在线演示 本地下载

  5. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  6. CSS圆角框，圆角提示框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. easyui toopTip，鼠标划过悬浮，显示一个小提示框的方法

    easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...

  8. 利用CSS中的:after、: before制作的边三角提示框

    小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...

  9. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

随机推荐

  1. 单列集合类的根接口Collection

    Collection接口 Collection是所有单列集合的父接口,因此在Collection中定义了单列集合(List和Set)通用的一些方法,这些方法可用于操作所有的单列集合.JDK 不提供此接 ...

  2. 【刷题】牛客网看到的鹅厂ML面筋-部分问题RecSys相关

    昨天下午六点半的电话面试,其实我已经有了一个不错的实习offer ,不是特别想去腾讯了,没有太怎么准备,接的电话. 整个面试15分钟,开始就是自我介绍,接着问项目,和上一段百度实习经历.问题大致如下: ...

  3. Jmeter单个长连接发送多个Sample

    Mark自:https://blog.csdn.net/lykangjia/article/details/16337505 1. 线程组,在我们测试方案里面,每个线程模拟一个用户,执行用户的登录.等 ...

  4. MySQL——合并查询结果

    利用  UNION 关键字,可以给出多条  SELECT  语句,并将它们的结果组合成一个结果集.合并时,两个表对应的列数和数据类型必须相同.SELECT 语句之间使用  UNION  或  UNIO ...

  5. MonkeyRunner 综合实践

    综合实践 测试场景 连接设备,自动安装并启动考研帮app 启动后登录账号(账号zxw1234 密码:zxw123456),然后截图并保存到指定文件位置. 思路分析 连接设备 安装app 启动app 输 ...

  6. 起步wex5 谷歌浏览器兼容性问题，CheckBox不显示

  7. Python Spider - urllib.request

    import urllib.request import urllib.parse import json proxy_support = urllib.request.ProxyHandler({' ...

  8. 洛谷P1072Hankson的趣味题题解

    题目 一道十分经典的数论题,在考场上也可以用暴力的算法来解决,从而得到\(50pts\)的较为可观的分数,而如果想要AC的话,我们观察原题给的数据范围\(a,b,c,d\)(为了好表示,分别代表a1, ...

  9. 洛谷 P1903 [国家集训队]数颜色 / 维护队列

    墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. \(Q\) \(L\) \(R\) 代表询问你从第L支画笔到第R支画笔中共有几种不同 ...

  10. POJ 1848 Tree 树形DP

    题目大意: 给出一棵树,现在要往这棵树上加边,使得所有的点都在环中,且每个点只能属于一个环 题解: 考虑DP: \(dp[i][0]\)表示使\(i\)这颗子树的每个点都在环内需要加的最少边数. \( ...