纯CSS Tooltips..

最新推荐文章于 2023-09-20 08:52:36 发布

weixin_34315665

最新推荐文章于 2023-09-20 08:52:36 发布

阅读量96

点赞数

      什么是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>

关注博主即可阅读全文