其實原理很簡單,理解一些偽類和偽元素的看一下就懂了
html:
<div title="Tooltip text for first div">啊啊啊</div>
<div title="Tooltip text for second div">哈哈哈</div>
css:
div:before{ content:attr(title); display:none; }
div:hover::before{
width:200px;
display:block;
background:yellow;
border:1px solid black;
padding:8px;
margin:25px 0 0 10px;
position:absolute;
}
div:hover{ z-index:10; position:relative; }
此處和原文有點不同,在div:hover:before中加了個position:absolute;