1.CSS基礎提示框(Tooltip)
HTML) 使用容器元素 (like <div>) 并添加 "tooltip" 類，在滑鼠移動到 <div> 上時顯示提示資訊，
提示文本放在行內元素上(如 <span>) 并使用class="tooltiptext"，
CSS)tooltip 類使用 position:relative, 提示文本需要設定定位值 position:absolute， 注意: 接下來的實體會顯示更多的定位效果，
tooltiptext 類用于實際的提示文本，模式是隱藏的，在滑鼠移動到元素顯示 ，設定了一些寬度、背景色、字體色等樣式，
CSS3 border-radius 屬性用于為提示框添加圓角，
:hover 選擇器用于在滑鼠移動到到指定元素 <div> 上時顯示的提示，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS簡單學習</title>
<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
padding: 5px 0;
border-radius: 6px;
text-align: center;
background-color: black;
color: white;
/* 定位，提示資訊顯示在右側 */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
/* 定位，提示資訊顯示在左側
position: absolute;
z-index: 1;
top: -5px;
right: 105%; */
/* 定位，提示資訊顯示在頭部
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px; */
/* 定位，提示資訊顯示在底部
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px; */
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip">
滑鼠移動到這里
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
2.CSS提示工具中添加箭頭
我們可以用CSS 偽元素 ::after 及 content 屬性為提示工具創建一個小箭頭標志，箭頭是由邊框組成的，但組合起來后提示工具像個語音資訊框，
在提示工具內定位箭頭: top: 100% , 箭頭將顯示在提示工具的底部，left: 50% 用于居中對齊箭頭，
注意：border-width 屬性指定了箭頭的大小，如果你修改它，也要修改 margin-left 值，這樣箭頭在能居中顯示，
border-color 用于將內容轉換為箭頭，設定頂部邊框為黑色，其他是透明的，如果設定了其他的也是黑色則會顯示為一個黑色的四邊形，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS簡單學習</title>
<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
padding: 5px 0;
border-radius: 6px;
text-align: center;
background-color: black;
color: white;
/* 頂部提示框/底部箭頭 */
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
/* 底部提示框/頂部箭頭
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px; */
/* 右側提示框/左側箭頭
position: absolute;
z-index: 1;
top: -5px;
left: 110%; */
/* 左側提示框/右側箭頭
position: absolute;
z-index: 1;
top: -5px;
right: 110%; */
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
/* 頂部提示框/底部箭頭 */
top: 100%;
left: 50%;
margin-left: -5px;
/* 底部提示框/頂部箭頭
bottom: 100%;
left: 50%;
margin-left: -5px; */
/* 右側提示框/左側箭頭
top: 50%;
right: 100%;
margin-top: -5px; */
/* 左側提示框/右側箭頭
top: 50%;
left: 100%;
margin-top: -5px; */
border-width: 5px;
border-style: solid;
/* 頂部提示框/底部箭頭 */
border-color: black transparent transparent transparent;
/* 底部提示框/頂部箭頭
border-color: transparent transparent black transparent; */
/* 右側提示框/左側箭頭
border-color: transparent black transparent transparent; */
/* 左側提示框/右側箭頭
border-color: transparent transparent transparent black; */
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>頂部提示框/底部箭頭</h2>
<div class="tooltip">滑鼠移動到這里
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
3.CSS提示工具的淡入效果
可以使用 CSS3 transition 屬性及 opacity 屬性來實作提示工具的淡入效果，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS簡單學習</title>
<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
padding: 5px 0;
border-radius: 6px;
text-align: center;
background-color: black;
color: white;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* 淡入 1秒內從 0% 到 100% 顯示: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<h2>提示工具淡入效果</h2>
<p>滑鼠移動到以下元素，提示工具會在1秒內從 0% 到 100% 完全顯示，</p>
<div class="tooltip">滑鼠移動到這里
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258443.html
標籤：其他
上一篇：Hexo、主題、部署上線