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/ ...
随机推荐
- JavaSE----01.Java简介
01.Java简介 1.java介绍 Java是于1995年由Sun公司推出的一种跨平台.面向对象的高级程序设计语言.Java最初的名字叫OAK.Java是一种通过解释方式来执行的语言,其语法 ...
- pycharm 激活码 2019/11最新福利（2）
812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2lnbmVlT ...
- 六、springboot 简单优雅是实现短信服务
前言 上一篇讲了 springboot 集成邮件服务,接下来让我们一起学习下springboot项目中怎么使用短信服务吧. 项目中的短信服务基本上上都会用到,简单的注册验证码,消息通知等等都会用到.所 ...
- 移动端border-radius的几个BUG
个人博客: http://mcchen.club 一.Android 2.3 自带浏览器不支持 % 通常我们实现一个正圆只需要border-radius: 50%即可,大致代码如下 .foo { wi ...
- WebGL简易教程(十一)：纹理
目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 1. 概述 在之前的之前的教程<WebGL简易教程(九):综合实例:地形的绘制& ...
- python编程基础之二十六
偏函数:当一个函数有大量的参数时候,调用时候非常不方便,于是就可以用偏函数解决,将一些参数固定(默认值),达到简化函数调用的目的 使用偏函数需要导入functools import functools ...
- python编程基础之二十一
元组: t1 = () t2 = tuple() 成员访问: t1 =(10,7,12,23) print(t1[0]) #下表访问 连接操作 t1 = (1,2,3) t2 =(4,5,6) t3 ...
- django2.0+连接mysql数据库迁移时候报错
django2.0+连接mysql数据库迁移时候报错 情况一 错误信息 django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 ...
- 面试必备：高频算法题终章「图文解析 + 范例代码」之 矩阵 二进制 + 位运算 + LRU 合集
Attention 秋招接近尾声,我总结了 牛客.WanAndroid 上,有关笔试面经的帖子中出现的算法题,结合往年考题写了这一系列文章,所有文章均与 LeetCode 进行核对.测试.欢迎食用 本 ...
- Powershell寻找域管在线服务器
记录线下Powershell在域环境中对于服务器的信息收集 Powershell的脚本有很多,在内网渗透测试中不仅能扫,能爆,能转发,还能做更多的事情.我们常用的脚本有Powersploit,Empi ...