5 回答
NadiaSmile
TA贡献149条经验 获得超291个赞
我喜欢用display:none; 然后hover的时候display:block.
刚才F12看了一下源码,一开始display:none, 鼠标悬停时display:inline, 应该就是onmouseover时改了
具体怎么写的你可以探究一下源码
望采纳~~~~
罂厢墨己
TA贡献6条经验 获得超0个赞
<style type="text/css">
#wrap{
width: 300px;
margin: 100px auto;
box-shadow: 1px 1px 5px 1px #ccc;
padding: 20px;
}
.tooltips{
display:inline-block;
width:120px;
padding:3px 10px;
border:1px solid #d9d9d9;
position:relative;
}
.tooltips:hover:before,.tooltips:hover:after{
opacity:1;
}
.tooltips:before,.tooltips:after{
-webkit-transition:all .4s;
transition:all .4s;
opacity:0;
}
.tooltip1:before{
position:absolute;
content:'';
top:100%;
left:50%;
border-top: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid rgba(0,0,0,.5);
border-left: 5px solid transparent;
-webkit-transform:translate(-50%,-5px);
transform:translate(-50%,-5px);
}
.tooltip1:after{
content:attr(data-tip); /*//注意这里*/
position:absolute;
top:100%;
left:50%;
padding:3px 10px;
background:rgba(0,0,0,.5);
color:#fff;
white-space:nowrap;
-webkit-transform:translate(-50%,5px);
transform:translate(-50%,5px);
}
</style>
<div id="wrap">
<div class="tooltip1 tooltips" data-tip="哈哈，我是tooltip">这里！这里！</div>
</div>
添加回答
举报
0/150
提交
取消