html圆圈里面问号,html,css实现问号提示信息

问题：如何使用html,css实现问号提示信息？不使用js

解决：使用hint.css或自己写

方法：

方法一：使用hint.css

http://kushagragour.in/lab/hint/

方法二：

This is the inline help tip! You can explain to your users what this section of your web app is about.

此代码共3种演示效果，请点击上面的按钮进行切换。

鼠标移到右侧的“？”问号上查看效果。

css：#content{

background-color: #FFF;

border-radius: 4px;

padding: 40px;

margin: 0 auto;

max-width: 600px;

position: relative;

margin: 0 auto 100px;

}

.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;

}

参考：http://sc.chinaz.com/jiaobendemo.aspx?downloadid=1481591154771

html圆圈里面问号,html,css实现问号提示信息相关推荐

css实现提示信息,单纯使用CSS实现动态提示信息
单纯使用CSS实现动态提示信息效果,代码如下: CSS代码部分a.info { position:relative; z-index:0; background-color:#ccc; color:# ...
10中文显示都是问号_CAD字体出现问号乱码的解决方法
阅读本文前,请您先点击上面的蓝色字体"绘图班",再点击"关注",这样您就可以继续免费收到最新文章了.每天都有分享.完全是免费订阅,请放心关注. 也许在工作中我们 ...
matlab公式上为什么会有问号,MathType公式显示问号怎么解决
有朋友在使用MathType编辑公式时,发现编辑好的公式在Word中会显示乱码,有些符号显示不出来,只能显示问号或者空格,这种解决方法如下: 1.双击显示有问题的公式进入到MathType编辑页面, ...
【JS】问号点和双问号的用法
1. 问号点(?.) 当访问多层对象属性(比如 res.data.list)时,如果属性res.data为空,则会报引用错误,为此我们不得不这么处理: 1 let dataList = res ...
TypeScript 中的问号+冒号、双问号、问号+点、感叹号+点
?: ?: 是指可选参数,可以理解为参数自动加上undefined function fun(x: number, y?: number) { // 可选参数return x + (y || 0); ...
TypeScript 中问号+点 (?.) 和双问号 (??) 的含义
问号+点表达式 (可选链操作符:?.) 例如 let res = obj?.arr?.length 等价于 let res = obj && obj.arr && ob ...
php正则匹配问号,正则点号和问号 +
? 匹配前面的子表达式零次或一次.例如,"do(es)?"可以匹配"does"或"does"中的"do".?等价于{0, ...
php 7.2 双问号,PHP7的双问号“??”语法以及和“?:”的区别
PHP7中增加了双问号"??"的语法,我们来讨论一下这个新语法怎么使用,先看下面这个简单的语句:echo $a ?? -1; 这行语句是一个判断语句,判断变量$a是否存在,存在的话 ...
php两个问号??表示什么意思，PHP两个问号运算符，双问号表达式
其实两个问题??是php7新推出的表达式, c = a ?? b; 表示如果a非空,则c = a, 如果a为空,则 c = b: php7以前经常使用到三元运算表达式, $name = issset( ...

html圆圈里面问号,html,css实现问号提示信息

html圆圈里面问号,html,css实现问号提示信息相关推荐

最新文章

热门文章