鼠标悬停实现显示与隐藏特效

简单记录 - 慕课网 Web前端 步骤四：鼠标悬停实现显示与隐藏特效

初步掌握定位的基本使用，以及CSS选择器更高级的运用，完成一个网页中必会的鼠标经过隐藏显示特效。

实现了 enen

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>二维码的动态效果</title>

    <style>

    body {

        margin: 0px;

    }

    #box {

        width: 100%;

        height: 100px;

        background-color: black;

        position: fixed;

        /*bottom:0px; 最下面的 */

        bottom: 0px;

        /*top: 100px;*/

    }

    #wechat {

        width: 44px;

        height: 44px;

        background-image: url("imgs/wechat.png");

        background-repeat: no-repeat;

        background-size: 100%;

        margin: 28px auto;

        position: relative;

    }

    #code {

        display: none;

        width: 180px;

        height: 180px;

        background-color: white;

        background-image: url("imgs/wechatcode.png");

        background-repeat: no-repeat;

        background-size: 100%;

        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png', sizingMethod='scale');

        position: absolute;

        left: -66px;

        bottom: 70px;

    }

    #wechat:hover {

        background-image: url("imgs/wechatH.png");

    }

    #wechat:hover>#code {

        display: block;

    }

    </style>

</head>

<body>

    <div style="height: 2000px"></div>

    <!-- 用于包含二维码所有的内容，显示在页面中的底部 -->

    <div id="box">

        <!-- 用于显示微信图标 -->

        <div id="wechat">

            <!-- 用于显示/隐藏二维码图片 -->

            <div id="code"></div>

        </div>

    </div>

</body>

</html>

二维码动态显示隐藏效果

移动鼠标到微信图标处 动态显示二维码



【Web】CSS实现鼠标悬停实现显示与隐藏 特效的更多相关文章

  1. Web前端鼠标悬停实现显示与隐藏效果

    css定义,偏移量,相对定位,绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位,就是定义网页标签在运行时显示的位置 css提供Position ...

  2. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  3. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  4. 兄弟连教育分享：用CSS实现鼠标悬停提示的方法

    兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实 ...

  5. 用WPF实现在ListView中的鼠标悬停Tooltip显示

    原文:用WPF实现在ListView中的鼠标悬停Tooltip显示 一.具体需求描述 在WPF下实现,当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息. 二.代码 ...

  6. ArcGIS api for javascript——鼠标悬停时显示信息窗口

    描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...

  7. jquery之超简单的div显示和隐藏特效demo

    闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

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

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

  9. jquery鼠标悬停突出显示

    在线演示 本地下载

随机推荐

  1. PHP表白墙网站源码

    PHP表白墙网站源码,可以做校园内的,也可以做校区间的,可封装成APP.告别QQ空间的表白墙吧. 安装简单,上传程序安装,然后设置账号密码,登陆后台切换模板手机PC都要换开启插件访问前台. 安装完成后 ...

  2. WinUI 3 Preview 3 发布了，再一次试试它的性能

    1. WinUI 3 在微软 Build 2020 开发者大会上,WinUI 团队宣布可公开预览的 WinUI 3 Preview 1,它让开发人员可以在 Win32 中使用 WinUI.最终 XAM ...

  3. SpringBoot + Mybatis-Plus 实现多数据源简单示例

    1. 简介   在单体项目中,经常出现想要访问多个数据源的情况,或者因为某些性能瓶颈,将大数据量的业务表分离到另一个库等情况.   实现多数据源的方案有很多,Mybatis-Plus提供了非常简单的实 ...

  4. 求求你，别再用wait和notify了！

    Condition 是 JDK 1.5 中提供的用来替代 wait 和 notify 的线程通讯方法,那么一定会有人问:为什么不能用 wait 和 notify 了? 哥们我用的好好的.老弟别着急,听 ...

  5. Excel优雅导出

    流程 原来写过一篇文章,是介绍EasyExcel的,但是现在有些业务需要解决,流程如下 1.需要把导出条件转换成中文并存入数据库 2.需要分页导出 3.需要上传FTP或者以后上传OSS 解决方案 大体 ...

  6. vue-router 路由传参的几种方式，刷新页面参数丢失

    常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...

  7. Kubernetes【K8S】(五)：Service

    Service概念 Kubernetes Service定义了一个Pod的逻辑分组,一种可以访问它们的策略.这组Pod能被Service访问到,通常是通过label Selector. Service ...

  8. 牛客挑战赛46 C

    题目链接: 排列 考虑\(dp\),我们思考如何设计状态 将第i个数插入i-1个数中,我们考虑会新增多少个超级逆序对 假设将\(i\)插入后\(i\)的位置为\(l\),\(i-1\)的原来的位置为\ ...

  9. 用DirectX 11绘制一个Cube

    之前一篇文章讲了如何初始化DirectX 11,现在在此基础上绘制一个Cube,总体可概括为以下几个步骤: 定义Cube顶点数据结构 创建Vertex Buffer和Index Buffer 编写应用 ...

  10. CODING DevOps 线下沙龙回顾二：SDK 测试最佳实践

    讲师:潘志刚 声网质量效能部门负责人,超过 14 年服务器.移动终端.音视频编解码以及汽车电子等跨行业从业经历,负责建立测试基础架构和自动化测试方案,主持搭建持续集成测试生态体系.现任声网质量效能部门 ...