链接鼠标滑过显示二维码

最新推荐文章于 2022-05-29 16:26:43 发布
最新推荐文章于 2022-05-29 16:26:43 发布
阅读量830 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KkaBum/article/details/100922096
版权
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         a {
  12.             text-decoration: none;
  13.         }
  14.         ul {
  15.             width: 100%;
  16.             height: 100px;
  17.             text-align: center;
  18.             font-size: 0px;
  19.         }
  20.         ul li {
  21.             width: 100px;
  22.             height: 100px;
  23.             display: inline-block;
  24.         }
  25.         ul li a {
  26.             display: block;
  27.             width: 100px;
  28.             height: 100px;
  29.             line-height: 100px;
  30.             text-align: center;
  31.             background-color: yellow;
  32.             font-size: 12px;
  33.         }
  34.         .erweima {
  35.             background-color: pink;
  36.             position: relative;
  37.         }
  38.         .erweima > div img {               /*子代选择器*/
  39.             visibility: hidden;
  40.             position: absolute;
  41.             transition: visibility .2s ease,top .4s ease; /*设置过渡属性*/
  42.             z-index: -1;
  43.             top: 0px;
  44.             left: -70px;
  45.         }
  46.         .erweima:hover >div img {
  47.             visibility: visible;
  48.             /* transition: top .4s ease; */
  49.             top: 100px;
  50.             
  51.             
  52.         }
  53.         
  54.     </style>
  55. </head>
  56. <body>
  57.     <ul>
  58.         <li><a href="#">下载app</a></li>
  59.         <li><a href="#">下载app</a></li>
  60.         <li><a href="#">下载app</a></li>
  61.         <li><a href="#" class="erweima">下载app
  62.             <div>
  63.                 <img src="download.png">/*二维码*/
  64.             </div>
  65.         </a></li>
  66.         <li><a href="#">下载app</a></li>
  67.         <li><a href="#">下载app</a></li>
  68.     </ul>
  69. </body>
  70. </html>

KkaBum
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery鼠标经过显示二维码特效代码
03-20
jQuery鼠标经过显示二维码代码是一款jQuery选项卡跟鼠标经过图片遮罩层显示和二维码特效。
HTML页面右下角鼠标经过显示二维码悬浮框
05-31
HTML页面右下角鼠标经过显示二维码悬浮框
html中hover属性拓展鼠标放置在图片上出现二维码
Booom007的博客
07-25 4939
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div { marg
鼠标悬停显示二维码图片
08-06
鼠标悬停显示二维码图片
jQuery鼠标悬停或经过图片时弹出二维码遮罩效果
12-26
jQuery鼠标悬停或经过图片时弹出二维码遮罩效果
Js-鼠标移动，二维码的显示和隐藏
可可Yi奇的博客
09-28 733
Js简单实现鼠标移动，二维码的显示和隐藏 笔记 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
jQuery鼠标经过显示二维码代码
04-09
jQuery鼠标经过显示二维码代码是一款jQuery选项卡跟鼠标经过图片遮罩层显示和二维码特效。
原生鼠标悬停微信图标显示二维码效果
12-18
在IT行业中，实现“原生鼠标悬停微信图标显示二维码效果”是一项常见的交互设计，它主要涉及HTML、CSS和JavaScript这三个核心技术。以下是对这个主题的详细解析： 首先，我们需要一个HTML结构来放置微信图标和...
JS实现鼠标移上去显示图片或微信二维码
10-20
本文给大家分享一段使用的js代码实现鼠标移入显示图片或微信二维码样式，代码简单易懂，非常不错，需要的朋友参考下吧
jquery鼠标悬停显示二维码特效特效代码
03-20
【jQuery鼠标悬停显示二维码特效】是一种常见的网页交互设计，主要应用于网站或应用中的信息分享。这个特效在用户将鼠标指针悬停在特定元素（如图片、按钮或链接）上时，会动态显示一个二维码，方便用户扫描，快速...
CSS3鼠标经过下拉显示二维码特效代码
03-20
CSS3鼠标经过下拉显示二维码，鼠标悬停显示IOS和Android下载。
jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返回顶部按钮
09-04
jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返回顶部按钮
jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返.
10-31
jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返.
CSS3鼠标悬停下拉显示二维码特效代码
03-20
CSS3鼠标悬停下拉显示二维码是一款基于CSS3+JS实现的鼠标经过向下显示二维码跟二级菜单特效代码。
jquery微官网案例展示页面鼠标悬停显示二维码效果代码
11-12
jquery微官网案例展示页面鼠标悬停显示二维码效果代码 jquery微官网案例展示页面鼠标悬停显示二维码效果代码 jquery微官网案例展示页面鼠标悬停显示二维码效果代码 jquery微官网案例展示页面鼠标悬停显示二维码效果代码
鼠标移入图标显示二维码功能实现
云隐雾匿的博客
05-29 1409
鼠标移入图标显示二维码功能实现 微信打赏、赞助功能
javascript鼠标悬浮出现二维码
Min的博客
12-02 3154
<div id="Layer1" style="display: none; position: absolute; z-index: 100;box-shadow: 6px 6px 4px #888888;"> </div> <li><a href="#" onmouseout="hiddenPic();" onmousemove="showPic(event,'assets/
CSS实现鼠标经过网页图标弹出微信二维码
LIBINXIE的博客
11-27 4888
*~~ 特点 ~~ * 1、纯CSS实现二维码展示功能，减少加载JS； 2、使用CSS3 transform 属性； 第一步 在需要展示二维码的地方添加如下代码，其中标签内容可以根据需要修改成图片等,href=”javascript:”表示标签作为按钮使用，不做跳转，实现url访问拦截。 &lt;a class="weixin" href="javascript:"&gt; wechat ...
C# 鼠标移动到图片上显示二维码
最新发布
06-01
你可以使用 C# 中的 QrCode.Net 库来生成二维码，并将其显示在一个 PictureBox 控件中。具体实现步骤如下： 1. 在窗体中添加一个 PictureBox 控件。 2. 在 PictureBox 的 MouseHover 事件中，生成二维码图片，并将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值