纯css来实现提示框
用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来实现提示框的更多相关文章
- 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 纯CSS实现tooltip提示框，CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
- 用纯css改变下拉列表select框的默认样式（转）
用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习 关键字 前端 发布 kris 2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这 ...
- 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- 用纯css改变下拉列表select框的默认样式
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...
- 用css实现云状提示框
经常会用到云状提示框,如图: 基本框架是这样,以三角在左侧为例: <div class="container"> <div class="content ...
- 纯css3的上下左右提示框几种方法
经常用到三角形提示框,用图片吧,大小框不定,所以,css自己写了,可设置宽高比,就可自适应了. 图形例子如下: css代码如下 <style type="text/css"& ...
- [转载]用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...
随机推荐
- 【Tomcat】配置Tomcat
写这篇博文的原因:因为发布Maven项目的时候,始终无法访问.所以顺便重新配置了Tomcat. 1.首先到官网下载一个Tomcat7版本的zip包,解压后,放入C盘(根据个人需求放置). 2.修改co ...
- [Sass]混合宏的参数
[Sass]混合宏的参数--传一个不带值的参数 Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形: A) 传一个不带值的参数 在混合宏中,可以传一个不带任何值的 ...
- vba 相关
返回当前默认文件路径: Application.DefaultFilePath 返回应用程序完整路径 Application.Path 返回当前工作薄的路径 ThisWorkbook.Path App ...
- 二维码跳转不同的 app store
说道二维码 之前是用来跳转app store 然后在就是出来的 扫码付款什么的 用的很平常,其实里面也很简单 自己刚开始接触的时候 同事说要做一个二维码下载 应用 => 我=懵逼 ...
- React学习笔记-8-属性和状态详解
属性的含义和用法props=properties 英文中属性的意思.属性不可以修改,也就是属性不可以由组件进行修改,组件的属性是由父组件传递过来的,相当于组件在出生的时候带的.用法第一种:直接在调用组 ...
- 怎么写makefile?(转)
跟我一起写 Makefile 陈皓 第一章.概述 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和 pr ...
- 记一次proc_open没有开启心得感悟
引言: 今天在部署服务器的时候,使用composer来安装依赖.遇到了 The Process class relies on proc_open, which is not available on ...
- iOS 导出 ipa 包时 四个选项的意义
iOS 导出 ipa 包时 四个选项的意义 如图 在 iOS 到处 ipa包的时候 会有四个选项 1.Save for iOS App Store Deployment 保存到本地 准备上传App ...
- sqlserver 中数据导入到mysql中的方法以及注意事项
数据导入从sql server 到mysql (将数据以文本格式从sqlserver中导出,注意编码格式,再将文本文件导入mysql中): 1.若从slqserver中导出的表中不包含中文采用: bc ...
- Jenkins 2.16.3默认没有Launch agent via Java Web Start，如何配置使用
问题:Jenkins 2.16.3默认没有Launch agent via Java Web Start,如下图所示,而这种启动方式在Windows上是最方便的. 如何设置才能让出来呢? 打开&quo ...