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/ ...
随机推荐
- Scala 学习笔记之集合(8) Try和Future
import util._ import concurrent.ExecutionContext.Implicits.global import concurrent.Future import co ...
- 大头儿子和小头爸爸的战斗--java字符和字符串
故事背景 一座普普通通的小屋里,住着大头儿子.小头爸爸和围裙妈妈.在他们普普通通的生活中,总是响起充满欢乐的笑声.最温暖的家又成了他们每个人的爱的源泉. <大头儿子和小头爸爸>是孩子居首( ...
- （7）Cmake的使用简介
CMake是一个跨平台的安装(编译)工具,是一个比Make更高级的的编译配置工具,可以根据不同平台.不同编译器,通过编写CmakeLists,可以控制生成的Makefile,从而控制编译过程. ...
- Github配合Jenkins，实现vue等前端项目的自动构建与发布
本篇文章前端项目以vue为例(其实前端工程化项目的操作方法都相同),部署在Linux系统上(centos). 之前做前端项目的部署,一直都是手动运行打包命令,打包完.再使用FTP.Xshell等这类的 ...
- linux分区与挂载
分区是将一个硬盘驱动器分成若干个逻辑驱动器,分区是把硬盘连续的区块当做一个独立的磁盘使用.分区表是一个硬盘分区的索引,分区的信息都会写进分区表.通常情况下,为磁盘分区通常使用fdisk,它是对基于MB ...
- LeetCode初级算法--数组01：只出现一次的数字
LeetCode初级算法--数组01:只出现一次的数字 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn. ...
- HeidiSQL、Navicat、mysql命令和source命令导入sql脚本的速度比较
一.四种导入方式的比较 1.heidisql客户端是一条一条插入的,速度最慢,而且很脆弱比较容易崩溃: 2.mysql命令导入380万记录用时1小时13分(属于前台运行的命令,ctrl+c就可以结束) ...
- Python爬取猫眼电影100榜并保存到excel表格
首先我们前期要导入的第三方类库有; 通过猫眼电影100榜的源码可以看到很有规律 如: 亦或者是: 根据规律我们可以得到非贪婪的正则表达式 """<div class ...
- Git上传项目至GitHub
要使用github,首先需要下载git.安装git 1.先在github上创建一个git仓库,复制该github路径 2.用cmd进入一个目录 git clone github路径 从github上直 ...
- 一文读懂Spring MVC执行流程
说到Spring MVC执行流程,网上有很多这方面的文章介绍,但是都不太详细,作为一个初学者去读会有许多不理解的地方,今天这篇文章记录一下我学习Spring MVC的心得体会 话不多说,先上图: ...