<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<style>
.tooltip?{
????position:?relative;
????display:?inline-block;
????border-bottom:?1px?dotted?black;
}
.tooltip?.tooltiptext?{
????visibility:?hidden;
????width:?120px;
????background-color:?black;
????color:?#fff;
????text-align:?center;
????border-radius:?6px;
????padding:?5px?0;
????position:?absolute;
????z-index:?1;
????bottom:?150%;
????left:?50%;
????margin-left:?-60px;
}
.tooltip?.tooltiptext::after?{
????content:?"";
????position:?absolute;
????top:?100%;
????left:?50%;
????margin-left:?-5px;
????border-width:?5px;
????border-style:?solid;
????border-color:?black?transparent?transparent?transparent;
}
.tooltip:hover?.tooltiptext?{
????visibility:?visible;
}
</style>
<body?style="text-align:center;">
<h2>頂部提示框/底部箭頭</h2>
<div?class="tooltip">鼠標移動到我這
??<span?class="tooltiptext">提示文本</span>
</div>
</body>
</html>after里面的top是怎么來定位，讓三角和上面的框銜接？搞不懂原因
3 回答
已采納
習慣受傷
TA貢獻885條經驗 獲得超1144個贊
.tooltiptext 的 after 是根據 .tooltiptext 為相對位置布局，下邊這句?
border-width:?5px; border-style:?solid; border-color:?black?transparent?transparent?transparent;
是實現三角的重要代碼。
在?.tooltiptext::after 中沒有定義三角的寬高，而上邊定義了?border-width: 5px; 導致?.tooltiptext::after 的寬高變成了 10，只有最上邊顏色為 black，所以就顯示了倒三角。
?.tooltiptext::after 中 這一句：top: 100%;?left: 50%; ?margin-left: -5px;?將倒三角布局在了??.tooltiptext 元素的下邊中間， 因為寬高為 10px，向左移動5px，恰好在中間。
top:100%; 100% 就是?.tooltiptext 元素的高度，所以貼在?.tooltiptext 元素下邊。
guoyou
TA貢獻28條經驗 獲得超30個贊
?top:?100%; ? ?的100%是相對于它已定位的父元素.tooltiptex高，因為你父元素的高是28px, 所以設置?top:?28px;也可以得到相同的效果
- 3 回答
- 0 關注
- 2926 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消