色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css加tooltip

如果你想在網(wǎng)頁(yè)中顯示提示信息,可以使用CSS為元素添加tooltip效果。Tooltip是指在鼠標(biāo)懸浮于某個(gè)元素上時(shí),彈出提示框顯示該元素的信息。

/*創(chuàng)建Tooltip樣式*/
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /*去除下劃線(xiàn)*/
}
/*創(chuàng)建提示框樣式*/
.tooltip .tooltiptext {
visibility: hidden; /*默認(rèn)隱藏提示框*/
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1; /*放置在頂層*/
bottom: 125%; /*位于元素頂部*/
left: 50%; /*水平居中*/
margin-left: -60px; /*使提示框居中*/
}
/*鼠標(biāo)懸浮時(shí)顯示提示框*/
.tooltip:hover .tooltiptext {
visibility: visible;
}

在HTML中,我們需要為元素添加class屬性,class的值為“tooltip”,并將需要顯示的信息添加在span標(biāo)簽內(nèi)。例如:

<p>這是一段<span class="tooltip">帶tooltip提示框<span class="tooltiptext">你好啊</span></span> 的文字</p>

在實(shí)際應(yīng)用中,還可以通過(guò)CSS自定義tooltip樣式,增加動(dòng)畫(huà)效果等。使用CSS加Tooltip可以為網(wǎng)頁(yè)添加更多的交互體驗(yàn),提升用戶(hù)體驗(yàn)。