html+css 提示工具
阿新 • • 發佈：2018-12-21
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;