纯CSS鼠标提示工具tooltip.css
发布时间：2018-01-09, 10:58:15 分类：HTML | 编辑 off 网址 | 辅助
正文 2698字数 382,618阅读
<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>Run code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
有过 1 条评论 »
<!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><!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>九九乘法表（点击出现4种）
<!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>