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

简单记录 - 慕课网 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. 在AX4.0中使用C#脚本的实现

    1,虽然ms收购了ax,但是在ax低版本(ver<=4.0)中,还没有办法直接使用ms现在主推的.net技术. 通常的做法是现在AX中天津.net的引用,然后才能在代码中使用.net的一些对象以 ...

  2. java 命令行操作

    打包命令 例如:将testproject下的文件打包成test.war jar cvf test.war ./testproject

  3. Java之MS SQL数据库连接

    一  1.首先,到微软官方下载jdbc驱动包 Microsoft JDBC Driver 4.0 for SQL Server 2.运行sqljdbc_4.0.2206.100_chs.exe,把文件 ...

  4. 后缀自动机(SAM):SPOJ Longest Common Substring II

    Longest Common Substring II Time Limit: 2000ms Memory Limit: 262144KB A string is finite sequence of ...

  5. 自定义仿 QQ 健康计步器进度条

    自定义仿 QQ 健康计步器进度条 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 闲着没事,趁上班时间偷偷撸了 ...

  6. 移动端布局方案汇总&amp;&amp;原理解析

    阿里flexible布局 - 版本1.x 该布局于 2017年8月9日被2.0版本取代 实现原理 假设(UI稿750px宽) 设置viewport的 scale = 1/window.devicePi ...

  7. C++/CLI泛型应用

    2019年01月16日, QQ群友不知道要折腾什么, 提出了以下问题: 样例代码中的是C#语言写的, 翻译成C++/CLI就不会了, 于是我试着谢了一下, 发现可以实现, 于是就贴出来与大家分享, 源 ...

  8. html基础知识梳理

    1.浏览器内核 补充:blink为Google与Opera共同开发. 2.web标准 web标准为w3c和其他标准化组织制定的一系列标准的集合.(标签闭合.小写.不乱嵌套,使用外链css/js;结构行 ...

  9. IP代理

    import requests # 定义爬取url地址 base_url = 'https://www.baidu.com/' # 定义代理IP地址 proxies = {'http':'http:/ ...

  10. 2018年11月16日 我和SB交流有代沟-继续字符串4

    test="abcdeffedcba" v=test.lstrip("bcabc")#寻找的是最多匹配然后移除指定字符串 print("1.lstri ...