CSS文本提示框

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=GB2312 "   />
< title > sample </ title >
< style type = " text/css "  media = " screen " >
body {
font - size:12px;
}
/*  链接按钮 3  */
.abtn_3 {
    font - size:14px;
    line - height:1em;
    background:url(http: // www.moonless.net/i/sample.gif) no-repeat -33px -123px;
    text - decoration:none;
    position:relative;
}
.abtn_3 span {
    visibility:hidden;
    overflow:hidden;
}
.abtn_3:hover {
    text - indent: 0 ;
}
/*  提示框  */
.hintsB {
    display:none;
}
.abtn_3:hover .hintsB {
    display:block;
    position:absolute;
    top: - 1 .3em;
    left:20px;
    width:180px;
    padding: 0   0   0  5px;
    background:url(http: // www.moonless.net/i/sample.gif) no-repeat 0 center;
    color:# 326324 ;
    cursor:text;
    font - weight:normal;
}
@media all and (min - width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
    line - height:18px;
    padding:7px 4px 6px 6px;
    border:1px solid #bed48f;
    border - left:none;
    background - color:#effaeb;
    font - size:12px ! important;
}
</ style >
</ head >
< body >
< br >
< br >
< br >
< br >
< a href = " javascript:void(0); "   class = " abtn_3 " >
     < span > 提示 </ span >
     < div  class = " hintsB " >
         < div > 这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！ </ div >
     </ div >
</ a >

</ body >
</ html >