css 悬浮显示框

admin
2019-09-04
前端
围观


<div class="bruce flex-ct-y">
    <a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
    <a class="tooltips" href="https://www.baidu.com"></a>
</div>

css

.tooltips {
    position: relative;
    margin-top: 10px;
    padding: 0 20px;
    border-radius: 10px;
    height: 40px;
    background-color: $purple;
    line-height: 40px;
    color: #fff;
    &::after {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        background-color: rgba(#000, .5);
        opacity: 0;
        text-align: center;
        font-size: 12px;
        content: attr(data-msg);
        transition: all 300ms;
    }
    &:first-child {
        margin-top: 0;
    }
    &:hover::after {
        left: calc(100% + 20px);
        opacity: 1;
    }
    &[href]:empty::before {
        content: attr(href);
    }
    &[href]:empty:hover::after {
        display: none;
    }
}

上一篇： css 两端文本,text-align-last
下一篇： js正则表达式的手册

如果你觉得作者很棒，可以通过扫码支付打赏哦！
- 微信打赏
- 支付宝打赏

相关推荐

SEO优化,关键词提取网站

SEO优化,关键词提取网站,关键字提取，搜索热度，等等一些的查询，网站推荐。

admin 2019-01-20 166人阅读
vue-cli3配置请求路径

vue-cli3 配置请求路径

admin 2020-04-13 186人阅读
关于 1.9.0 调用 API 返回 Promise 对象不正确的临时解决方案

关于 1.9.0 调用 API 返回 Promise 对象不正确的临时解决方案

admin 2019-04-16 111人阅读
前端网站性能测试

前端网站性能测试

admin 2019-09-18 127人阅读
js对象检索给定选择器指示的一组属性

js对象检索给定选择器指示的一组属性

admin 2020-03-11 28人阅读
Flex 布局教程：实例篇

Flex 布局教程:实例篇上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。

admin 2019-01-04 117人阅读
node 写接口视频学习网站

node 写接口视频学习网站

admin 2020-05-16 32人阅读
ES6 新特性之 Module

ES6 新特性之 Module

admin 2019-10-16 33人阅读
chen在家还是蛮冷的。

这种天气来冷了，呆在家里没用武之地，没办法，人生还是要微笑的面对。chen

admin 2019-01-02 119人阅读
uni-app 页面跳转报错 redirectTo:fail can not redirectTo a tabbar page

uni-app 页面跳转报错 redirectTo:fail can not redirectTo a tabbar page

admin 2019-06-13 669人阅读
网站已经开始升级，站长在努力的跟新中

网站已经开始升级，站长在努力的跟新中

admin 2019-07-25 71人阅读
123

123

test 2019-10-09 29人阅读
input placeholder 属性字体颜色修改。

input placeholder 属性字体颜色修改。

admin 2019-06-30 151人阅读
字体图标编辑软件FontCreator

FontCreator 是一个强大的字体编辑软件，对于广大的字体修改爱好者来说这是一个莫大的福音，它大幅降低了字体修改的入门难度！

admin 2018-12-25 165人阅读
Element UI Tabel 封装的表格组件

Element UI Tabel 封装的表格组件

admin 2019-09-15 158人阅读
vue监听不到旧的数据

vue监听不到旧的数据，监听的到的数据都是一样的，没有旧的，解决办法。

admin 2019-10-04 145人阅读
vue路由带参跳转页面不刷新

vue路由带参跳转页面不刷新

admin 2020-04-29 59人阅读
uni-app请求传递和获取数据

uni-app请求传递和获取数据

admin 2019-01-24 33534人阅读
uni-app框架推荐

跨多个平台，让前端不用那么复杂的编程，还是不错的框架，然后推荐给大家。

admin 2019-01-20 146人阅读
css 两端文本,text-align-last

css 两端文本,text-align-last

admin 2019-09-05 64人阅读
vue 富文本xss处理

vue 富文本xss处理

cnblog 2020-06-22 26人阅读
第一次做绿皮火车

今天是一个很美好的日子。

admin 2019-01-19 144人阅读
PanDownload推荐

这软件下载速度还行，个人觉得不错，推荐给大伙用一下。

admin 2019-01-29 97人阅读
css雪碧图快速生成

css雪碧图快速生成，也会生成对应的css

admin 2020-03-25 42人阅读
Vue 使用MD5 加密

Vue 使用MD5 加密

admin 2019-10-22 940人阅读
IIS7 / IIS7.5 URL 重写 HTTP 重定向到 HTTPS（转）

IIS7 / IIS7.5 URL 重写 HTTP 重定向到 HTTPS（转），可能在安装域名的时候出现一些问题，然后我就把这步骤记录下来了。

admin 2018-12-26 209人阅读
js获取url参数

js获取url参数

鹏仔先生 2020-07-08 9人阅读
node字蛛字体压缩

node字蛛字体压缩，用node.js ，来压缩字体包，非常实用。

admin 2019-03-13 159人阅读
统计某个数据表里有多少文章

统计某个数据表里有多少文章

admin 2019-09-10 106人阅读
chen今天把博客升级完。

搭建了3天，很久没玩帝国csm，有点生疏，不过搭建过程中发现很多好玩的，还是不错的，以后分享给大家。chen

admin 2018-12-25 178人阅读
vue-cli4 框架使用webpack

vue-cli4 框架使用webpack

admin 2020-04-07 698人阅读
Bootstrap文件上传插件的坑

今天在使用基于Bootstrap文件上传插件bootstrap fileinput的时候遇见的问题。

YANG 2019-04-12 79人阅读
努力前进

忘记一个人，并非不再想起，而是偶尔想起，心中却不再有波澜。真正的忘记，是不需要努力的。每个人的电话本里，都会有那么一个你永远不会打，也永远不会删的号码；每个人的心里，都会有那么一个你永远不会提，也永远不会忘的人。

admin 2019-01-17 98人阅读
uniapp 自定义导航栏

cnblog 2020-07-24 27人阅读
html5标签兼容

因为只有IE8及其以前的版本需要处理，那在其他的浏览器下就是不太需要的操作，最大就是兼容性，在IE8及其以前是不支持h5的，并且会将其解析为行间元素

admin 2019-08-03 91人阅读
python实战视频学习

python实战视频学习

admin 2019-07-04 65人阅读
css 复制的颜色会变化

css 复制的颜色会变化

admin 2019-07-23 83人阅读
git命令--解决冲突

git命令--解决冲突

admin 2020-03-11 55人阅读
VSCode背景图片修改

VSCode背景图片修改

admin 2020-05-16 39人阅读
CodePen的详细使用教程 codepen如何存放自己的代码

CodePen的详细使用教程 codepen如何存放自己的代码

鹏仔先生 2020-07-08 19人阅读
uniApp现在很火的一个框架推荐,强烈推荐

uniApp现在很火的一个框架推荐,强烈推荐，本人也在使用这个框架写项目。

admin 2019-04-05 633人阅读
vue-cli过滤器查询功能

vue-cli过滤器查询功能，因为vue2.0 取消了过滤器，很不舒服，然后又要自己写，好吧只能自己写了，一个简单的搜索功能。

admin 2019-01-28 101人阅读
React安装环境搭建

React安装环境搭建,在使用react进行组件化开发之前,我们首先需要配置一个我们可以使用的开发环境,下面,我们将一步步讲解,配置一个基本的开发环境。

admin 2018-12-25 129人阅读
vue-cli 引入echarts并使用

vue-cli 引入echarts并使用,echarts,echarts曲线图,使用案例，详细教程。

admin 2019-10-13 59人阅读
uniapp 跳转到底部栏页面

uniapp 跳转到底部栏页面,

admin 2019-07-27 442人阅读
jquery 手风琴

效果图在下面： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

admin 2019-09-15 65人阅读
js 原型链

js 原型链,仿照类似jQuery，或者zepto 写一个简单的原型继承的例子

admin 2019-09-18 90人阅读
html5标签兼容插件

html5 不兼容IE9以下，所以列，html5兼容插件下载。

admin 2019-01-29 104人阅读
vue-cli页面跳转保留数据

vue-cli页面跳转保留数据，让页面只请求一次。

admin 2019-01-28 176人阅读
vue-cli 引入组件并传值

vue-cli 引入组件并传值，这个问题很皮，我写App的时候发现不好传递参数，后面找到解决方案，然后分享给大家。

admin 2018-12-25 123人阅读

如果你觉得作者很棒，可以通过扫码支付打赏哦！