用js用多了，就疏忽了最基本的css了---用title属性来实现提示框。下面言归正传------如何用css实现提示框：

1、利用title属性来实现鼠标滑过某个元素时，实现提示整段内容的功能（利用title属性时，提示框的样式是默认的，而利用自定义的data-title属性时，提示框的样式和位置自己可以随意定义），

首先，要将鼠标需要悬浮的元素相对定位,
再次，利用hover和伪类的绝对定位来显示提示的内容

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>提示框</title>

     <style>

         #box{width: 400px;margin: 100px auto;}

         /*首先，要将鼠标需要悬浮的元素相对定位*/

         #con2{position: relative;margin: 40px auto;}

         /*再次，利用伪类的绝对定位来显示提示的内容*/

         #con2:hover:after{

             content: attr(data-title);

             /*利用attr来读取data-title的值*/

             position: absolute;

             left: -120px;

             top:30px;

             border: 1px solid #ccc;

             background: #f1f7f7;

             border-radius: 5px;

             padding: 10px 15px;

         }

     </style>

 </head>

 <body>

 <div id="box">

     <div id="con" title="这是一个测试，这是一个测试，这是一个测试">这是一个测是...</div>

     <div id="con2" data-title="这是第二个测试，这是第二个测试，这是第二个测试">这是第二个...</div>

 </div>

 </body>

 </html>

效果图如下

两者的对比，第一个图是利用自己定义的data-title属性，提示框的样式可以自己定义

第二个图是利用title实行，提示框的样式是默认的。两者各有好处。

纯css来实现提示框的更多相关文章

  1. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  2. 纯CSS实现tooltip提示框，CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  3. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

  4. 用纯css改变下拉列表select框的默认样式（转）

    用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息.     在这 ...

  5. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  6. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  7. 用css实现云状提示框

    经常会用到云状提示框,如图: 基本框架是这样,以三角在左侧为例: <div class="container"> <div class="content ...

  8. 纯css3的上下左右提示框几种方法

    经常用到三角形提示框,用图片吧,大小框不定,所以,css自己写了,可设置宽高比,就可自适应了. 图形例子如下: css代码如下 <style type="text/css"& ...

  9. [转载]用纯css改变下拉列表select框的默认样式

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...

随机推荐

  1. css3伪类、伪元素选择器---nth-child()和nth-of-type()选择器的区别

    p:nth-child(2) 要满足两个条件,1:选择的是p元素的父元素的第二个子元素   2:选择的第二个子元素必须是p元素,如果不满足,则将不显示 p:nth-of-type(2) 选择父元素下的 ...

  2. 整理一下Entity Framework的查询 [转]

    Entity Framework是个好东西,虽然没有Hibernate功能强大,但使用更简便.今天整理一下常见SQL如何用EF来表达,Func形式和Linq形式都会列出来(本人更喜欢Func形式). ...

  3. Android issues

    1. Android studio 2.0 Error:Exception in thread "main" java.lang.UnsupportedClassVersionEr ...

  4. 移居 GitHub

    博客很久没能更新了,很多代码也从博客园逐渐转移到 GitHub,欢迎新老用户光顾: https://github.com/kedebug 个人博客:http://kedebug.me/

  5. curses.h的安装和使用

    gcc test.c -o test 用以上命令编译包含curses.h头文件的程序时会出现各种引用未定义的错误,并且已经安装了 kernel-devel ncurese-devel ncurese- ...

  6. javascript的一些知识

    一．Js的this,{},[] this是Javascript语言的一个关键字,随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是调用的函数自己. { } 大括号 ...

  7. Session的属性

    Session的属性  Session在网络应用中被称为会话.具体到web中的Session指的就是用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间,因 ...

  8. css3 动画的有关属性

    transform transform: none|transform-functions; transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. ...

  9. libsvm下的windows版本中的工具的使用

    下载的libsvm包里面已经为我们编译好了(windows).进入libsvm\windows,可以看到这几个exe文件: a.svm-toy.exe:图形界面,可以自己画点,产生数据等. b.svm ...

  10. android 蓝牙 http://blog.csdn.net/u012843100/article/details/52384219

    http://blog.csdn.net/u012843100/article/details/52384219