文档章节

纯CSS实现的鼠标经过文本时提示的信息

lgscofield
 lgscofield
发布于 2015/06/26 13:59
字数 125
阅读 22
收藏 0

<a class="tooltips" href="#tooltips">
    这就是Tooltips
    <span>
        正是你见到的,这些附加的说明文字是在鼠标经过的时候显示。
    </span>
</a>
<style type="text/css">
/*Tooltips*/
.tooltips{
    position:relative; /*这个是关键*/
    z-index:2;
}
.tooltips:hover{
    z-index:3;
    background:none; /*没有这个在IE中不可用*/
}
.tooltips span{
    display: none;
}
.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
    display:block;
    position:absolute;
    top:21px;
    left:9px;
    width:15em;
    border:1px solid black;
    background-color:#ccFFFF;
    padding: 3px;
    color:black;
}
</style>
 

本文转载自:http://lgscofield.iteye.com/blog/1742242

共有 人打赏支持
lgscofield

lgscofield

粉丝 22
博文 140
码字总数 63036
作品 0
南京
架构师
私信 提问
12款超强CSS3应用集锦下载

CSS3非常强大,它可以渲染很多你意想不到的特效,而且目前浏览器对CSS3的支持也逐渐放开了,所以利用CSS3可以制作一些即美观又实用的网页应用,下面12款CSS3应用集锦分享给大家,有源代码下载...

Lunaqi
2017/11/20
0
0
前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单   在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(...

grootzhang
2016/05/18
0
0
【转】能用css的地方尽量不要用js

原文:http://blog.csdn.net/wzgdjm/article/details/50824236 在写这篇文字的时候,本来没有打算归类到前端性能优化的范畴,只是想写一些关于有的地方我们可以利用css代替js实现网页动态的效...

iNiL0119
2016/10/10
25
0
20 个 CSS 高级技巧汇总

黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filte...

名字已被取
2016/03/15
120
0
CSS 5种很炫的Hover效果。跳,放大,旋转,淡入,悬浮

给平淡的站点带来活力 hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹...

筱飞
2016/03/24
522
0

没有更多内容

加载失败,请刷新页面

加载更多

领哥,项目管理

领哥 https://www.leangoo.com/kanban/board_list

miaojiangmin
8分钟前
0
0
2018阿里云双12年终大促主会场全攻略

摘要: 双12官方攻略出炉! 2018阿里云双12年终大促活动已经于12月7日正式开启,从已开放的活动页面来看,活动分为两个阶段: 12月7日-12月23日的拉新返现阶段和12月24日-12月28日的TOP100英...

阿里云云栖社区
9分钟前
0
0
努力使失败保持原子性(64)

失败的原子调用应该使得对象保持在被调用之前的状态,所谓:失败原子性 几种途径实现: 设计一个不可变对象,其失败原子性是显然的 对于可变参数,执行前检查参数有效性 避免执行一半报错,后...

Java搬砖工程师
9分钟前
0
0
slot分发内容

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。 有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。 内容分发就是指混合父组件的内...

Carbenson
21分钟前
1
0
python开发入门

1.执行python文件 # python ./demo.py 2.Python ImportError: No module named 'requests'异常 解决方法: # pip install requests;...

硅谷课堂
22分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部