css3提示文字弹窗代码

2019-09-13 郑州网站建设  

不需要额外的javascript代码,你可以通过使用css3样式来创建一个类似的效果。

Css代码

[data-tips] {

         position: relative;

         text-decoration: none;

}

         [data-tips]:after,

         [data-tips]:before {

             position: absolute;

             z-index: 100;

                   opacity: 0;

         }

                   [data-tips]:after {

                            content: attr(data-tips);

                            height: 25px;

                            line-height: 25px;

                            padding: 0 10px;

                            font-size: 12px;

                            text-align: center;

                            color: #fff;

                            background: #222;

                            border-radius: 5px;

                            text-shadow: 0 0 5px #000;

                            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);

                            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);

                            box-shadow: 0 0 5px rgba(0,0,0,0.3);

                            white-space: nowrap;

                            -moz-box-sizing: border-box;

                            -webkit-box-sizing: border-box;

                            box-sizing: border-box;

                   }

                   [data-tips]:before {


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2137.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • 代码
  • javascript
  • 需要
  • 额外