纯css实现鼠标悬停文字的汽泡提示
作者:
七幺七 | 来源:发表于
2019-03-20 16:50 被阅读0次1 固定样式
<!--标签上加title属性-->
<div class="tooltip" title="提示内容"></div>
2 伪类实现
<!--标签上自定义属性-->
<td labelTooltip="提示内容">声乐</td>
td {
position: relative;
}
td:after {
position: absolute;
left: 50%;
transform: translate(-50%);
top: -15px;
padding: 2px 10px;
box-shadow: 0 2px 9px #999;
background-color: #FFF;
border-radius: 4px;
color: #666;
/*这里显示的内容为表格中自定义的labelTooltip属性对应的值*/
content: attr(labelTooltip);
z-index: 2;
line-height: 20px;
height: 20px;
}
image.png
本文标题：纯css实现鼠标悬停文字的汽泡提示
本文链接：https://www.haomeiwen.com/subject/vidtvqtx.html
网友评论