用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. Delaunay剖分与平面欧几里得距离最小生成树

    这个东西代码我是对着Trinkle的写的,所以就不放代码了.. Delaunay剖分的定义: 一个三角剖分是Delaunay的当且仅当其中的每个三角形的外接圆内部(不包括边界)都没有点. 它的存在性是 ...

  2. 344. Reverse String

    https://leetcode.com/problems/reverse-string/ Python语法糖爆炸时间 class Solution(object): def reverseStrin ...

  3. 高可用thrift客户池的实现详解

    最近,公司要求将组内的thrift客户端组件推广至公司内使用.基本的要求如下: 1.高可用 2.集成名称服务,也就配置文件支持服务发现 3.解耦,客户端和高可用组件解耦,简单来说就是,如果以后要切换其 ...

  4. DateUtil（比较两个日期是否是同一天）

    1.比较两个日期是否是同一天 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date la ...

  5. C# 同类型实体赋值

    #region 更新赋值,前者赋值给后者 public static void ShadowCopy(object a, object b) { if (a == null) return; if ( ...

  6. vue笔记

    安装vue脚手架工具 sudo cnpm install -g vue-cli

  7. jquery mobile

    页面:data-role="page"  header.content.fooder 过渡:data-transition ="slide"  反向过渡:dat ...

  8. Riemann映射定理

    单复变函数几何理论最高的成就我想应该属于Riemann映射定理吧! Riemann映射定理:$\mathbb C$中任意边界多余一个点的单连通域$D$都与单位圆盘$B(0,1)$等价,即存在着$D$上 ...

  9. windows系统 SVN出现 can't open file‘\XXX\txn-current-lock’ 拒绝访问 问题处理

    问题描述:  在新建的svn目录下,提交文件出现 如图错误提示.

  10. 鱼搜_鱼搜官网_鱼搜搜索_http://www.7yusou.com

    收集了N多视频小站,然后花了3天时间弄了一个鱼搜搜索网站.欢迎大家访问哟. http://www.7yusou.com