鼠标移入图标显示二维码功能实现

一、效果图

二、代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>测试</title><style>*{ margin:0; padding:0; list-style:none}body{ background:#E6F0F3;}.weixin{ width:30px; height:30px; margin:100px auto;position:relative; font-size:12px; text-align:center;}.weixin a img{width:30px; height:30px;} /*微信图标*//*以上两个width和height数值需保持一致，可根据需要调整尺寸，定位方式，font-size设置字体大小*/.weixin .weixin_nr{width:100px; height:120px; padding:10px; background:#fff; text-align:center; position:absolute; left:-45px; top:-152px; display:none;}/*以上可根据需要调整外边框大小，背景色，定位方式，摆放位置等*/.weixin .weixin_nr img{ margin-bottom:5px;}/*以上可调整二维码图片大小，注意和外边框大小相匹配*/.weixin .weixin_nr .arrow{ width:0; height:0; border-top:10px solid #fff;border-left:10px solid transparent;border-right:10px solid transparent; position:absolute; left:50px; top:140px;}/*以上可调整箭头样式*/.weixin.on .weixin_nr{ display:block;}</style>
</head>
<body>
<div style="width: 100%;height: 100px;"></div><!--界限1，方便展示效果--><!-- 代码部分begin --><div class="weixin" onmouseover="this.className = 'weixin on';" onmouseout="this.className = 'weixin';"><a href="javascript:;"><img src="./er.png" alt=""/><!--待添加图片1（图标）--></a><div class="weixin_nr"><div class="arrow"></div> <!--箭头样式--><img src="./support.png" width="100" height="100" /><!--待添加图片2（二维码）-->支持一下</div></div>
<!--代码部分end--><div style="width: 100%;height: 100px;"></div><!--界限2--></body>
</html>

鼠标移入图标显示二维码功能实现相关推荐

微信鼠标点击显示二维码代码
<script type="text/javascript">function showImg(){document.getElementById("wxIm ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...
知云文献翻译登录时不显示二维码，显示二维码后扫描登录不跳转解决方案
1.登录时不显示二维码--解决方案打开 Internet Explorer 点击"设置"中的"Internet 选项" 切换到"连接"选项 ...
SNF开发平台WinForm-平板拍照及扫描二维码功能
在我们做项目的时候,经常会有移动平板处理检验,审核等,方便移动办公.这时就需要在现场拍照上传问题,把当场问题进行上传,也有已经拍完照的图片或加工过的图片进行上传.还有在车间现场一体机,工控机这种产物 ...
0.96英寸128*64 OLED显示二维码
0.96英寸I2C,OLED 显示屏显示二维码 STM32 SSD1306 RT-Thread 关于软.硬件环境开启RT-Thread的终端打印二维码功能思路移植开肝开始测试关于最近手头 ...
使用CSS实现悬停显示二维码
目录方法一方法二(推荐) 在进行广告配置时,要显示的二维码太小,直接扫码扫不出来,于是需要实现鼠标悬停显示大的二维码. 有两种实现的方法: 方法一直接在要悬停显示二维码的 DOM 元素上添加样式 ...
用STC单片机在TFT屏上显示二维码
用STC8A单片机在TFT屏上显示二维码概述最近项目需要用单片机在TFT屏上显示二维码,将C++下显示二维码的代码经过改造,移值到C代码的单片机,成功运行,经多次测试能稳定运行,TFT屏显示部分, ...
基于phpqrcode生成带LOGO图标的二维码（源代码例子）
基于phpqrcode生成带LOGO图标的二维码(源代码例子) <?php //文件输出 include('phpqrcode.php'); // 二维码数据 $data = 'http://w ...
Android用Zxing扫二维码/生成二维码功能
新年已过,一切恢复真正常,新的一年给自己几句指引: 光努力还不行,方向很重要. 总是想着最坏的结果,就会让人失去改变的勇气. 你当然有权利选择自己的人生--但只有在你真正强大后,逆行的阻力才会降到最小 ...

鼠标移入图标显示二维码功能实现

一、效果图

二、代码

鼠标移入图标显示二维码功能实现相关推荐

最新文章

热门文章