【Web】CSS实现鼠标悬停实现显示与隐藏 特效
鼠标悬停实现显示与隐藏特效
简单记录 - 慕课网 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实现鼠标悬停实现显示与隐藏 特效的更多相关文章
- Web前端鼠标悬停实现显示与隐藏效果
css定义,偏移量,相对定位,绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位,就是定义网页标签在运行时显示的位置 css提供Position ...
- 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 兄弟连教育分享:用CSS实现鼠标悬停提示的方法
兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实 ...
- 用WPF实现在ListView中的鼠标悬停Tooltip显示
原文:用WPF实现在ListView中的鼠标悬停Tooltip显示 一.具体需求描述 在WPF下实现,当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息. 二.代码 ...
- ArcGIS api for javascript——鼠标悬停时显示信息窗口
描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...
- jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...
- 转:纯CSS实现“鼠标移过显示层”效果
利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...
- jquery鼠标悬停突出显示
在线演示 本地下载
随机推荐
- block、inline、inline-block区别以及标签嵌套
1.block 将元素转为块元素,块元素占一行,可以设置宽和高. 2.inline 将元素转为行内元素,占一行,不可以设置宽和高. 3.inline-block 将元素设置为行内块元素,这时元素既可以 ...
- ant-design 基础格式
1 格式 <template> <div> <center><h1>这是·注册页面</h1></center> <a-fo ...
- Python高级语法-深浅拷贝-总结(4.2.1)
@ 目录 1.说明 2.代码 关于作者 1.说明 任何可变数据类型都牵扯到深浅拷贝 但是元组,常数等,不可变数据类型,无论浅拷贝,深拷贝都是指向 不管如何嵌套,一旦牵扯到可变数据类型,都会有深浅区别 ...
- Numpy的学习2-基础运算1
import numpy as np a=np.array([10,20,30,40]) # array([10, 20, 30, 40]) b=np.arange(4) # array([0, 1, ...
- pandas的学习4-处理丢失数据
import pandas as pd import numpy as np ''' 有时候我们导入或处理数据, 会产生一些空的或者是 NaN 数据,如何删除或者是填补这些 NaN 数据就是我们今天所 ...
- 全栈工程师-史上最强VSCODE插件-提高开发效率
当你点进来的时候 ,你可能是被标题吸引进来的,也有可能是 偶然间,看到的,首先恭喜你,已经准备好向全栈开发工程师靠近 ,那我们不说废话,直接开始,咱们先从安装步骤开始讲起 ,因为有些人连插件在哪都不知 ...
- UWP 实现Tab导航首页
先看效果: 这个是用Pivot来实现 1.自定义Pivot的样式,使用Blend工具生成模板,将HeaderTemplate的布局都隐藏 1 <Style x:Key="PivotSt ...
- python初学者-从小到大排序
x=input("x=") y=input("y=") z=input("z=") if x>y: x,y=y,x if x>z ...
- UICamera 编辑器与移动设备下的Find异常
某次出包后,在移动设备下,发现所有的UIDrag和一些UIHUD组件都失效了,看了看Editor下是正常的,后面就做了一系列检查措施来排除问题所在. 1.看了下log日志里是否有相关报错异常,结果毫无 ...
- 详解Vue中的插槽
作者: 小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 什么是插槽 在日常的项目 ...