html+css 提示工具
*{margin: 0px;padding: 0px;}
.box{
width:100px;
height: 50px;
position: relative;
margin: 100px auto;
}
/*鼠标移动上的时候显示*/
.box:hover span{
visibility: inherit;
}
span{
width: 70px;
height: 25px;
line-height: 25px;
display: inline-block;
background-color: #888;
position:absolute;
top: 60%;
left: 20%;
text-align: center;
/*元素不可见 ，但是还占原有的空间*/
visibility: hidden;
}
/*给span 元素前面添加一个元素*/
span:after{
content:' ';/*用conter:' '空元素*/
border-width: 10px;/*边框的宽度是20*/
border-style: solid;/*边框样式是 实线*/
/*边框的颜色，遵循 上右下左 的顺序。 显示下边框*/
border-color:transparent transparent #888 transparent;
/*给三角(显示出来的边框)加定位*/
position: absolute;
top: -75%;
left: 50%;
margin-left: -10px;
}
</style>
</head>
<body>
<div class='box'>移入显示隐藏
<span>加油！</span>
</div>
</body>
</html>
边框呈现三角原理
div{
width: 0px;
height: 0px;
border-top:50px solid #f0f;
border-right: 50px solid red;
border-bottom: 50px solid #ff0;
border-left: 50px solid #000;
}
设置div的上下左右边框的样式 自身宽高是0；会出现一下样式
不是垂直拼凑的！一边显示。其他透明就会出现三角形
透明：transparent
显示/隐藏（占位置）visibility: inherit / hidden;