用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. 用ip来获得用户所在地区信息

    淘宝api: package com.ebways.mq.utils; import com.alibaba.fastjson.JSON; import com.ebways.common.utils ...

  2. DevExpress 程序运行后 layoutView 卡片大小发生变化

    设置属性前效果:  将layoutView1.CardMinSize 的属性更改为(0, 0) 后 效果:

  3. Python-第三方库requests详解

    Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完全满足 HTT ...

  4. c/c++ string

    string类的定义.操作. #include<iostream> #include<string> using namespace std; int main() { // ...

  5. tp5 中 model 的修改器

    修改器可以在数据赋值的时候自动进行转换处理 class User extends Model { public function setNameAttr($value){ return strtolo ...

  6. C语言 遍历流程 变量生命周期

    来自c程序设计 谭浩强 程序编译流程 运行c程序的步骤 在编好一个c程序后.怎样上机进行编译运行呢?一般要经过一下几个步骤: 上机输入和编辑源程序.通过键盘和计算机输入程序,如果发现有错误,要及时改正 ...

  7. SVN数据仓库迁移

    1.在新服务器上部署环境 yum -y install subversion 2.备份原服务器数据仓库 svnadmin dump /home/myrepos >/data/svn_dump s ...

  8. 蓝牙协议分析(7)_BLE连接有关的技术分析

    转自:http://www.wowotech.net/bluetooth/ble_connection.html#comments 1. 前言 了解蓝牙的人都知道,在经典蓝牙中,保持连接(Connec ...

  9. 【Java EE 学习 55】【酒店会员管理系统项目总结】

    本酒店会员管理系统使用了SSH框架和传值播客提供的协同OA静态页面. 项目地址:https://github.com/kdyzm/HotelMembersManagement 一.需求分析 酒店会员管 ...

  10. Lua源码编译之CL编译器编译

    通过使用VC下的CL编译器,可方便地编译Lua源码,而无需构造工程并设置各种选项: 以下以源码Lua5.3.1版本为例,将通过CL编译选项直接编译源码,为方便编译将采用批处理脚本,脚本放置在Lua解压 ...