<div data-title="hello, world">hello...</div>
<style>
div {
position: relative;
}
div:hover::after {
content: attr(data-title); //取到data-title属性的值
display: inline-block;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 5px;
position: absolute;
top: -50px;
left: -30px;
}
</style>
 
效果如下图:
 
 

css实现了hover显示title的效果的更多相关文章

  1. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  2. Hover.css:一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  4. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  5. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  6. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  7. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...

  8. 纯CSS图片缩放后显示详细信息

    哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...

  9. HTML5+CSS3点击指定按钮显示某些内容效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 机顶盒上gridview+ScrollView的使用。

    最近在机顶盒上做一个gridview, 其焦点需要在item的子控件上,但gridview的焦点默认在item上,通过 android:descendantFocusability="aft ...

  2. 用UILocalNotification实现一个闹钟(Swift)

    之前项目需求要实现一个闹钟,github上找了半天发现都是很旧的代码了,所以就准备自己写一个,刚好最近在学习Swift,就用Swift写了一个demo放在这里:https://github.com/P ...

  3. 谈谈Fragment中的onActivityResult

    大家或许有遇到这个神坑,在Fragment中使用startActivityForResult能够成功,可是在Fragment中的onActivityResult却无法被调用.一不注意就让人一夜愁白了头 ...

  4. TortoiseSVN和VisualSVN-Server的配置使用,外网访问SVN版本库

    TortoiseSVN和VisualSVN-Server的配置使用,外网访问SVN版本库 SVN客户端程序:TortoiseSVN SVN服务器程序:VisualSVN-Server ######## ...

  5. CentOS 6.5 安装 MySQL5.6 并用Navicat for MySQL 连接

    环境 : MySQL 5.6.21 64位 CentOS 6.5 64位 VMware 10 Navicat for MySQL 11 1.卸载自带mysql [root@localhost  ~]# ...

  6. SQL Server 2008 R2——使用数字辅助表(master..spt_values)实现用计数字段对记录进行重复显示

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...

  7. 烂泥:haproxy学习之手机规则匹配

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 今天我们来介绍下有关haproxy匹配手机的一些规则配置. 一.业务需要 现在根据业务 ...

  8. Vim插件管理

    一.简介 二.管理器 1)Vundle https://github.com/gmarik/vundle.git 2)vim-plug https://github.com/junegunn/vim- ...

  9. LNMP环境magento常见错误

    一.安装报404错误 git clone 下最新代码,跳转到index/install 安装时出现404错误 需要把伪静态规则加到nginx配置文件中: # # The default server ...

  10. spark standalone ha spark submit

    when you build a spark standalone ha cluster, when you submit your app,  you should send it to the l ...