Article Detail

纯CSS鼠标提示工具tooltip.css

@charset"UTF-8";[tooltip]:hover{position:relative;cursor:pointer}[tooltip]:hover...

HTML 阅读 39.3万 9 分钟阅读 2018-01-09 10:58
GDScript3
19 行
<style>@charset"UTF-8";[tooltip]:hover{position:relative;cursor:pointer}[tooltip]:hover:after,[tooltip]:hover:before{position:absolute;opacity:0;opacity:1\0;-webkit-animation:tooltip_fedeIn 0.7s linear forwards;-moz-animation:tooltip_fedeIn 0.7s linear forwards;-ms-animation:tooltip_fedeIn 0.7s linear forwards;animation:tooltip_fedeIn 0.7s linear forwards}@keyframes tooltip_fedeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes tooltip_fedeIn{from{opacity:0}to{opacity:1}}@-moz-keyframes tooltip_fedeIn{from{opacity:0}to{opacity:1}}@-ms-keyframes tooltip_fedeIn{from{opacity:0}to{opacity:1}}[tooltip]:hover:before{font-size:0.95em;content:attr(tips);background-color:#000;padding:0.5em 1em;color:#fff;white-space:pre;border-radius:2px;line-height:150%}[tooltip]:hover:after{display:block;content:"";width:0;height:0;border-width:8px;border-style:solid;border-color:transparent}[tooltip=left]:hover:after,[tooltip=left]:hover:before,[tooltip=right]:hover:after,[tooltip=right]:hover:before{top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}[tooltip=bottom]:hover:after,[tooltip=bottom]:hover:before,[tooltip=top]:hover:after,[tooltip=top]:hover:before{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}[tooltip=right]:hover:after,[tooltip=right]:hover:before{left:100%}[tooltip=right]:hover:before{margin-left:8px}[tooltip=right]:hover:after{border-left-width:0;border-right-color:#000}[tooltip=left]:hover:after,[tooltip=left]:hover:before{right:100%}[tooltip=left]:hover:before{margin-right:8px}[tooltip=left]:hover:after{border-right-width:0;border-left-color:#000}[tooltip=top]:hover:after,[tooltip=top]:hover:before{bottom:100%}[tooltip=top]:hover:before{margin-bottom:8px}[tooltip=top]:hover:after{border-bottom-width:0;border-top-color:#000}[tooltip=bottom]:hover:after,[tooltip=bottom]:hover:before{top:100%}[tooltip=bottom]:hover:before{margin-top:8px}[tooltip=bottom]:hover:after{border-top-width:0;border-bottom-color:#000}


/*demo*/
p {
    width:100px;
    background-color: #35B352;
    color: #fff;
    margin-top: 50px;
    margin:auto;
    padding: .5em .8em;
    border-radius: 2px;
}
/*end*/
</style>
<p tooltip="left" tips="左边提示">左边提示</p>                
<p tooltip="right" tips="右边提示">右边提示</p>                
<p tooltip="top" tips="上边提示">上边提示</p>                
<p tooltip="bottom" tips="下边提示">下边提示</p>
Comments 评论区
广西南宁市 2018-01-09 11:02

for循环最基础的知识做的九九乘法表

GDScript3
66 行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box div{
				width: 80px;
				display: inline-block;
				background-color: gray;
			}
			#box div span{
				display: block;
				line-height: 30px;
				color: pink;
				background-color:black;
				margin-right: 2px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!--<div>
				<span> 1 X 1 = 1 </span>
				<span> 1 X 2 = 2 </span>
				<span> 1 X 3 = 3 </span>
				<span> 1 X 4 = 4 </span>
				<span> 1 X 5 = 5 </span>
				<span> 1 X 6 = 6 </span>
				<span> 1 X 7 = 7 </span>
				<span> 1 X 8 = 8 </span>
				<span> 1 X 9 = 9 </span>
				<span> 1 X 10 = 10 </span>
			</div>
			<div>
				<span> 2 X 2 = 4 </span>
				<span> 2 X 3 = 6 </span>
				<span> 2 X 4 = 8 </span>
				<span> 2 X 5 = 10 </span>
				<span> 2 X 6 = 12 </span>
				<span> 2 X 7 = 14 </span>
				<span> 2 X 8 = 16</span>
				<span> 2 X 9 = 18 </span>
				<span> 2 X 10 = 20 </span>
			</div>
			......-->
		</div>
		<script>
			var box = document.getElementById('box')
			
			var str = ''
			//i是列数j是乘号后面的数，是第几列，成号后面的数就是几开始
			for( var i = 1; i < 10; i ++){
				str += '<div>'
				//console.log(str)
				for( var j = i; j < 10; j ++){
					 var n = i + 'X' + j + '=' + i*j
					 str += '<span>' + n + '</span>'
				}
				str += '</div>'
			}
			box.innerHTML = str
		</script>
	</body>
</html>
GDScript3
63 行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
			#box div{
				color: deeppink;
			}
			#box div span{
				padding: 5px;
				line-height: 20px;
				width: 70px;
				display: inline-block;
				border:1px solid peru;
				background-color: goldenrod;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!--<div>
				<span> 1 X 1 = 1 </span>
				<span> 1 X 2 = 2 </span>
				<span> 1 X 3 = 3 </span>
				<span> 1 X 4 = 4 </span>
				<span> 1 X 5 = 5 </span>
				<span> 1 X 6 = 6 </span>
				<span> 1 X 7 = 7 </span>
				<span> 1 X 8 = 8 </span>
				<span> 1 X 9 = 9 </span>
				<span> 1 X 10 = 10 </span>
			</div>
			<div>
				<span> 2 X 2 = 4 </span>
				<span> 2 X 3 = 6 </span>
				<span> 2 X 4 = 8 </span>
				<span> 2 X 5 = 10 </span>
				<span> 2 X 6 = 12 </span>
				<span> 2 X 7 = 14 </span>
				<span> 2 X 8 = 16</span>
				<span> 2 X 9 = 18 </span>
				<span> 2 X 10 = 20 </span>
			</div>
			......-->
		</div>
		<script>
			var box = document.getElementById('box')
			var str = ''
			//i为行，j为列
			for( var i = 1; i < 10; i ++){
				str += '<div>'
				//console.log(str)
				for( var j = 1; j <= i ; j ++ ){
					var n = j + 'X' + i + '=' + j*i
					str += '<span>' + n + '</span>'
				}
				str += '</div>'
			}
			box.innerHTML = str
		</script>
	</body>
</html>
广西南宁市2018-01-09 11:03:18

九九乘法表（点击出现4种）

GDScript3
81 行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 80px;
				height: 30px;
				background: #ADFF2F;
				text-align: center;
				line-height: 30px;
				font-size: 20px;
				color: #FF0000;
				position: absolute;
			}
		</style>
	</head>
	<body>
	</body>
	<script>
	    var stt=[one,two,three,four];
	    num =0;
	    document.onclick = function(){
	    	stt[num]();
	    	num++;
	    	num%=stt.length;
	    };
		    //第一种
		function one(){
			var str ='';
			
			for(var i=1;i<10;i++){
				for(var j=i;j<10;j++){
					str +='<div style="left:'+(i-1)*90+'px;top:'+(j-1)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
				}
			}
			document.body.innerHTML =  str;
		}	
	
			//第二种               ////////好别扭
		function two(){
			var str ='';
			
			for(var i=9;i>0;i--){
				for(var j=i;j>0;j--){
					str +='<div style="left:'+(9-i)*90+'px;top:'+(i-j)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
				}
			}
			document.body.innerHTML =  str;
		}
	
			//第三种
	    function three(){
			var str ='';
			
			for(var i=1;i<10;i++){
				for(var j=i;j<10;j++){
					str +='<div style="left:'+(9-i)*90+'px;top:'+(j-1)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
				}
			}
			document.body.innerHTML =  str;
		}
			
			//第四种
		function four(){
			var str='';	
			for(var i=1;i<10;i++){
				for(var j=9;j>i-1;j--){
					str +='<div style="left:'+(i-1)*90+'px;top:'+(9-j)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
				}
			}
			document.body.innerHTML =  str;
		}
		/*
		因为i<10是一个判断条件，则一直加的话最后数字只能到9
		因为j>i-1也是一个判断，而j最大值也是9
		所以到最后就会出现9 X 9
		*/
	</script>
</html>
| | #0
Comment Form 留下评论
正在回复 #0
粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。
正在上传...
提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。

lizhenqiu blog is powered by lizhenqiu.com Version 6.9

Processed in 0.0405 second(s) W3C

本博客的所有原创作品采用 知识共享 署名-非商业性使用-相同方式共享 2.5 协议 进行许可

本站由 七七牛 云存储 阿阿里云 计算与安全服务 拍又拍云 CDN 加速 百百度智能 AAMH 布布集网 AI指南针AI

桂公网安备 45010302000998号 桂ICP备15007619号-1 中国互联网举报中心 建议使用谷歌浏览器浏览
Navigation 文章导航
⌂ ↓ ↑
100%
图片预览
Gallery 图集
0 张图片

正在整理正文和评论里的图片。

当前页还没有可展示的图片。
Quick Comment 快速评论

直接输入内容，提交时仍会走当前页面的人机验证。

正在上传...
操作提示