一、概述

很多时候网站中需要在鼠标划过小图标时，悬浮出提示性的文字。比如下图：

鼠标悬浮后的效果

这种效果可以使用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实现鼠标悬浮后的提示效果的更多相关文章

  1. css实现鼠标悬浮字体流光背景模糊效果

    原文地址:→看过来 写在前面 有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额. 效果图 源码地址→传送门 预览地址→传送门 小知识 ...

  2. css&js实现顶部banner滚动提示效果

    以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...

  3. [vB.NET]为控件添加鼠标悬浮时的提示气泡

    实例代码: Dim k As ToolTip k = New ToolTip() k.AutoPopDelay = '显示出气泡后的延时时间(毫秒) k.InitialDelay = '出现前的延时( ...

  4. css图片上悬浮文字（丝带效果）实现

    首先看效果 思路:1.去掉“丝带“菱角使用的是overflow: hidden; 2.通过z-index降低图片的优先级或者调高“丝带”优先级来实现覆盖效果(z-index需要写在有position的 ...

  5. 转：纯CSS实现“鼠标移过显示层”效果

    利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...

  6. CSS实现鼠标悬浮无限向下级展示的简单代码

    *{ margin:; padding:; } ul,li{ list-style: none; } .ui-slide-box{ width: 300px; } .ui-slide-item{ wi ...

  7. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  8. CSS快速入门-鼠标悬浮(hover伪类)

    一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...

  9. css实现鼠标经过导航文字偏位效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. （转） websocket 和 socket 剖析

    Socket 与 WebSocket 本站文章除注明转载外,均为本站原创或者翻译. 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商: 本站部分原创和翻译文 ...

  2. 【Java】支付宝获取人脸采集认证的图片base64格式

    人脸识别结果查询接口zoloz.identification.user.web.query返回的imgStr图片字符串并不是标准的base64格式,解析不出图片. 由于标准的Base64并不适合直接放 ...

  3. 一致性哈希(PHP核心技术与最佳实践)

    <?php /** * 分布式缓存部署方案 * 当有1台cache服务器不能满足我们的需求,我们需要布置多台来做分布式服务器,但是 * 有个问题,怎么确定一个数据应该保存到哪台服务器上呢? * ...

  4. Js获取宽高度的归纳集锦总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种.属性根据不同的兼容性也分为五种 window.innerWidth //除去菜单栏的窗口宽度,与浏览器相关 window.inner ...

  5. CSS3新单位vw、vh、vmin、vmax使用详解

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...

  6. Docker 配置国内镜像

    前言 当我们使用Docker pull 拉取镜像时,有时候因网络问题,导致获取镜像报错,如下 :Error response from daemon:Get https://registry-1.co ...

  7. ConcurrentHashMap实现原理以及源码分析

    ConcurrentHashMap是HashMap的高并发版本,是线程安全的,而HashMap是非线程安全的 一.底层实现 底层结构跟hashmap一样,都是通过数组+链表+红黑树实现的,不过它要保证 ...

  8. 虚拟机上安装centos8.0

    一.准备宿主机 为了培训Hadoop生态的部署和调优技术,需要准备3台虚拟机部署Hadoop集群环境,能够保证HA,即主要服务没有单点故障,可执行基本功能,完成小内存模式的参数调整. 1.1.准备安装 ...

  9. Hyper-V 下linux虚拟机静态IP上网配置的两种方式（2）

    工作需要,搭建linux环境,网上搜了两种Hyper-V配置linux静态IP及上网的方式,记录一下,方便查阅,如下设置网络共享方式: win10下使用hyper-v在本机安装linux虚拟机后,网络 ...

  10. JVM系列一：JVM内存模型

    今天起开始总结JVM.自己也看了好多JVM相关的知识,在此做个总结. 打算分为五个部分来讲:JVM内存模型.JVM类加载机制.JVM垃圾回收机制.JVM启动参数设置及优化.JVM其他相关. 今天首先来 ...