纯css来实现提示框

时间：2022-09-15 13:41:24

用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>

效果图如下

纯css来实现提示框

纯css来实现提示框

两者的对比，第一个图是利用自己定义的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. &lbrack;转载&rsqb;用纯css改变下拉列表select框的默认样式

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

随机推荐

  1. Java学习注意事项

    一个Java文件中可以包含多个类. 如果有public类,则文件名必须和public类一样. 例如: class Pie { void f(){ System.out.println("Pi ...

  2. java使用Cipher进行签名和验签

    public static void main(String[] args) { try { String plainText = "duwenlei"; KeyPairGener ...

  3. MVC 的HTTP请求

    MVC 的HTTP请求过程(以IIS为例) 通过Browser发过请求给IIS(get/post) IIS得到请求后,再把请求转给aspnet_iisapi.dll处理,通过asp.net的一些框架的 ...

  4. callback in C

    callback is nothing but passing the function pointer to the code from where you want your handler/ c ...

  5. java 网站用户在线和客服聊天

    注:本文来源于<java 网站用户在线和客服聊天> 这是应用到项目中的一个例子. 实现原理是将信息存储到Application域里面.然后使用Struts2 Action 用json格式的 ...

  6. SpringBoot缓存之redis--最简单的使用方式

    第一步:配置redis 这里使用的是yml类型的配置文件 mybatis: mapper-locations: classpath:mapping/*.xml spring: datasource: ...

  7. 【转载】 C&num;往文件中追加文本内容信息

    在C#的文件相关操作中,往已有的文件中追加相关内容信息也是常有的操作,例如我们在写网站日志文件的时候,很多时候是1天的日志存放在一个txt文件中,此时就涉及到往原有文件中追加写入文本内容信息,追加文本 ...

  8. Docker Swarm 高可用详解

    Docker Swarm 高可用详解 Manager管理节点宕机后其他管理节点仍然可以使用管理 intermal distributed state store:内部分布式状态存储同步共享到每个节点. ...

  9. web项目除了业务还需要关注的点

    1:安全性,不允许访问外网,访问外网通过反向代理的方式. 2:安全性,和外网交互的时候,需要CA证书,基于SSL协议的证书 3:日志,生产上通常会关闭某些日志,所以,允许出现的日志就显得至关重要了. ...

  10. PHP中strlen和mb&lowbar;strlen函数的区别

    strlen strlen — 获取字符串长度 int strlen ( string $string ) 返回给定的字符串 string 的长度. mb_strlen int mb_strlen ( ...

相关文章