有关CSS Tooltips(电脑鼠标历经时显示信息)的实际效

日期:2021-03-10 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

客观事实上各式Tooltips方式十分多,但是绝大多数全是用Javascript完成,可是应用CSS,能够更简易,更合理率。最关键的是合乎规范。
大家对类添加position:relative特性,使得span标识的部位可以紧跟在连接后边。


拷贝编码
编码以下:

<a class="tooltips" href="#tooltips">这便是Tooltips<span>如你所见,这些额外的表明文本在电脑鼠标历经的情况下显示信息。</span></a>
<style type="text/css">
/*Tooltips*/
.tooltips{
position:relative; /*这个是重要*/
z-index:2;
}
.tooltips:hover{
z-index:3;
background:none; /*沒有这个在IE中不能用*/
}
.tooltips span{
display: none;
}
.tooltips:hover span{ /*span 标识仅在 :hover 情况时显示信息*/
display:block;
position:absolute;
top:21px;
left:9px;
width:15em;
border:1px solid black;
background-color:#ccFFFF;
padding: 3px;
color:black;
}
</style>