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/ ...
随机推荐
- link 和 @import 的区别是什么？
link语法结构: <link href="url" rel="stylesheet" type="text/css"> @im ...
- AVL树、红黑树以及B树介绍
简介 首先,说一下在数据结构中为什么要引入树这种结构,在我们上篇文章中介绍的数组与链表中,可以发现,数组适合查询这种静态操作(O(1)),不合适删除与插入这种动态操作(O(n)),而链表则是适合删除与 ...
- 【NOIP2016】蚯蚓
Description 本题中,我们将用符号 ⌊c⌋表示对 cc 向下取整,例如:⌊3.0⌋=⌊3.1⌋=⌊3.9⌋=3. 蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀 ...
- 基于mosquitto的MQTT客户端实现C语言
在对MQTT的学习过程中 一下的内容对我提供了帮助 https://www.runoob.com/w3cnote/mqtt-intro.html 对MQTT的入门级介绍 很基础讲解了什么是MQTT h ...
- 尹吉峰：使用 OpenResty 搭建高性能 Web 应用
2019 年 8 月 31 日,OpenResty 社区联合又拍云,举办 OpenResty × Open Talk 全国巡回沙龙·成都站,原贝壳找房基础架构部工程师尹吉峰在活动上做了<使用 O ...
- 关于Qt画点及计算机专业基础课程介绍
在计算机图形图像学中,开始都是先画点,我曾经在汇编上tc2.0上画点,后来是MFC,VB,Qt,Python,我觉得对于计算机专业的选择QT的原因是它是个C系的功能强大庞大的库,可以少写很多代码,但是 ...
- 爬虫破解知乎登入(不使用Selenium模块)
一.分析 知乎完成登入的步骤 首先获得cookies(如果不获得后面验证码无法获得) 获得验证码 提交登入相关内容 前两步简单稍微细心寻找规律即可 其中最难的是第三步应该他前端进行了js加密 这里没什 ...
- Centos7升级Git版本
centos 升级 Git 版本 问题描述 centos7 系统默认的 git 安装版本是 1.8,但是在项目构建中发现 git 版本过低,于是用源码编译的方式进行升级.同时该文章也适用于安装新的 g ...
- opencv::直方图均衡化
直方图均衡化 图像直方图: 是指对整个图像像在灰度范围内的像素值是指对整个图像像在灰度范围内的像素值(~)统计出现频率次数,据此生成的直方图,称为图像直方图-直方图. 直方图反映了图像灰度的分布情况. ...
- 常用函数-String
/************************************************************************ 函数功能:将字符串中str的old_value子字符 ...