css实现鼠标悬浮后的提示效果
一、概述
很多时候网站中需要在鼠标划过小图标时，悬浮出提示性的文字。比如下图：
鼠标悬浮后的效果
这种效果可以使用css中的伪类hover来实现。但有时候搞不清两个元素的嵌套关系。使用了hover却没有效果。本人刚开始使用的时候也踩了这个坑。在此做下记录：
html代码：
<body>
<span class="tip-img">
<span class="prompt-box">悬浮上来的内容</span>
</span>
</body>
css代码：
.tip-img {
display: inline-block;
background: url("img/icon-help.png") no-repeat left center;
height: 32px;
position: relative;
width: 12px;
}
.tip-img .prompt-box {
background-color: #ccc;
width:120px;
position: absolute;
left: 14px;
top: 5px;
display: none;
}
.tip-img:hover {
background: url("img/icon-help-hover.png") no-repeat left center;
}
.tip-img:hover .prompt-box {
display: inline-block;
}
注意：鼠标移动上去的元素和悬浮出来的元素一定要是嵌套关系，否则使用hover没有效果。而且被嵌套的内部元素一定要绝对定位脱离标准流，否则会影响标准流中元素的位置。
css实现鼠标悬浮后的提示效果的更多相关文章
- css实现鼠标悬浮字体流光背景模糊效果
原文地址:→看过来 写在前面 有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额. 效果图 源码地址→传送门 预览地址→传送门 小知识 ...
- css&js实现顶部banner滚动提示效果
以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...
- [vB.NET]为控件添加鼠标悬浮时的提示气泡
实例代码: Dim k As ToolTip k = New ToolTip() k.AutoPopDelay = '显示出气泡后的延时时间(毫秒) k.InitialDelay = '出现前的延时( ...
- css图片上悬浮文字（丝带效果）实现
首先看效果 思路:1.去掉“丝带“菱角使用的是overflow: hidden; 2.通过z-index降低图片的优先级或者调高“丝带”优先级来实现覆盖效果(z-index需要写在有position的 ...
- 转：纯CSS实现“鼠标移过显示层”效果
利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...
- CSS实现鼠标悬浮无限向下级展示的简单代码
*{ margin:; padding:; } ul,li{ list-style: none; } .ui-slide-box{ width: 300px; } .ui-slide-item{ wi ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- CSS快速入门-鼠标悬浮(hover伪类)
一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...
- css实现鼠标经过导航文字偏位效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- MySql自定义函数-关于保留小数位的特殊需求
背景 昨天,关于价格详情接口又来了一个小需求,而且有点特别.价格显示:改为保留两位小数,没错,就是保留两位小数.大家是不是想说这没啥特别的...数据库都有函数搞定了.例如四舍五入的ROUND(x,d) ...
- Java为什么需要四种引用？
首先抛出一个问题:在闲暇时间收拾自己家里的时候,对某一件物件要不要丢弃的问题上,是否有过食之无味,弃之可惜的感觉? 同样的,JVM在回收Java对象的时候,是否对对象实例也有食之无味,弃之可惜的感受? ...
- 复杂模型可解释性方法——LIME
一.模型可解释性 近年来,机器学习(深度学习)取得了一系列骄人战绩,但是其模型的深度和复杂度远远超出了人类理解的范畴,或者称之为黑盒(机器是否同样不能理解?),当一个机器学习模型泛化性能很好时 ...
- HikariCP重要参数配置
概述 HikariCP是Spring Framework 5.0的默认数据库连接池,这得益于他的高性能.但是如果配置不当,数据库连接池也可能因影响到系统性能. 重要参数 maximum-pool-si ...
- Vue-CLI项目中路由传参
Vue-CLI项目中路由传参 一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detai ...
- Vtable内存布局分析
vtale 内存布局分析 虚函数表指针与虚函数表布局 考虑如下的 class: class A { public: int a; virtual void f1() {} virtual void f ...
- JS中作用域和作用域链
1.执行环境(execution context) 执行环境定义了变量和函数有权访问的其他数据,决定了他们各自的行为.每个执行环境都有与之对应的变量对象(variable object),保存着该环境 ...
- [BZOJ1965][AHOI2005] 洗牌 - 扩展欧几里得
题目描述 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度过相当长的一段时间,小联提议用扑克牌打 ...
- spring boot 中通过CORS实现跨域
一.跨域问题出现的原因 出现跨域问题的原因是同源策略. 同源策略 主要是三同:同协议.同域名.同端口, 同源策略目的 保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则cookie可以共享 ...
- 5.Linux文件管理相关命令（下）
1.文件管理之:联网下载文件(wget.curl).文件上传与下载(rz.sz) 1.wget命令 1.CentOS7 系统最小化安装默认没有wget命令,需要进行安装 [root@oldboyedu ...