欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS实现文字提示框信息 CSS实现tips效果
这篇文章主要为大家详细介绍了CSS实现文字提示框信息 CSS实现tips效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

不少的站长追求网站的视觉效果,其中一种效果曾经有2个的站长咨询过361模板小编:CSS实现文字提示框信息 CSS实现tips效果。效果大概如下图:

CSS实现文字提示框信息 CSS实现tips效果

就是当鼠标经过文字文本的时候出现一个文字提示框加以说明,也就是我们常说的tips效果。下面361模板给出简易的tips效果代码,希望能抛砖引玉,帮大家掌握这个小的CSS技巧。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS实现鼠标经过文本时出现提示信息  361模板--www.ke361.com</title>
    <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:21px;
    left:9px;
    width:15em;
    border:1px solid black;
    background-color:#ccFFFF;
    padding: 3px;
    color:black;
    }
    </style>
  </head>
  <body>
    <a class="tooltips" href="#tooltips">361模板<span>361模板访问网址为:www.ke361.com</span></a>
  </body>
</html>


以上就是CSS实现文字提示框信息 CSS实现tips效果的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 文字提示框 tips

上一篇HTML点击按钮或链接不跳转只刷新页面的方法

下一篇HTML中CSS3的几个常见小应用

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在