纯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文档),它是一个新的网站的最终 ...
随机推荐
- MySQL详解--锁
http://blog.csdn.net/xifeijian/article/details/20313977 2014-03-06 23:45 66484人阅读 评论(17) 收藏 举报 分类: ...
- mysql主从复制实现数据库同步
mysql主从复制相信已经用得很多了,但是由于工作原因一直没怎么用过.趁着这段时间相对空闲,也就自己实现一遍.尽管互联网上已有大把类似的文章,但是自身实现的仍然值得记录. 环境: 主服务器:cento ...
- 总结移动安全的测试点及详解allowbackup漏洞
一.移动应用APP可能面临以下威胁: 木马--二次打包, 病毒--账号窃取, 篡改--资源篡改, 破解--广告植入, 钓鱼--信息劫持 二.移动终端APP安全评估的7个方向: 通信安全,敏感信息安全 ...
- [Android Pro] Android TypedValue.applyDimension()的用法
reference to : http://blog.csdn.net/voo00oov/article/details/45745819 这个方法的作用是 把Android系统中的非标准度量尺寸转 ...
- python中的反射
在绝大多数语言中,都有反射机制的存在.从作用上来讲,反射是为了增加程序的动态描述能力.通俗一些,就是可以让用户参与代码执行的决定权.在程序编写的时候,我们会写很多类,类中又有自己的函数,对象等等.这些 ...
- iOS 字符串删除 DOM
iOS string 删除 包含的 DOM NSMutableString *mutableString = [NSMutableString stringWithString:responseSt ...
- Vue.js介绍样码
了解一下,其它的什么SASS,COMPASS,WEBPACK,VUE.JS都看看,了解一下前端开发的一些知识点吧. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 【DWR系列03】- DWR主要类详解
img { border: 1px solid black } 一.简介 首先应该了解这个jar包主要的类,了解了类,就了解了DWR.DWR的在线javadoc:http://directwebrem ...
- C#使用ListView更新数据出现闪烁解决办法
C#使用ListView更新数据出现闪烁解决办法 在使用vs自动控件ListView控件时候,更新里面的部分代码时候出现闪烁的情况 如图: 解决以后: 解决办法使用双缓冲:添加新类继承ListView ...
- ng1.3+表单验证<AngularJs>
前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="er ...