当前位置: 首页 > 工具软件 > Tooltips.css > 使用案例 >

纯CSS Tooltips..

钦永贞
2023-12-01

      什么是Tootips? 这就是Tooltips如你所见,这些附加的说明文字在鼠标经过的时候显示。
      当然,支持HTML.如:
      .
<html>

      <head>

      </head>

      <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:9px;
        left:9px;
        width:15em;
        border:1px solid black;
        background-color:#ccFFFF;
        padding: 3px;
        color:black;
        }


      </style>

      <body >
        <a class="tooltips" href="#tooltips">
          这就是Tooltips<span>如你所见,这些附加的说明文字在鼠标经过的时候显示。</span>
        </a>

      </body>
    </html>
 类似资料: