• 注册
  • 代码教程 代码教程 关注:6 内容:36

    【纯css鼠标移动弹窗】鼠标经过一个地方时会显示一个弹窗,比如下载APP会弹出二维码和链接

  • 查看作者
  • 打赏作者
  • 9 渡劫 后期

    【纯css鼠标移动弹窗】鼠标经过一个地方时会显示一个弹窗,比如下载APP会弹出二维码和链接

    <style type="text/css">
    .lt_app_download{height:25px;width:65px;background:var(--jinsom-color);line-height:25px;text-align:center;position:fixed;top:25px;z-index:9999;left:125px;color:white;}
    .lt_app_download .lt_app_img{display:none;width:305px;height:170px;background:white;border:2px solid #c8c8c8;padding:10px;}
    .lt_app_download .lt_app_img img{width:150px;height:150px;float:left;}
    .lt_app_download .lt_app_img span{width:100%;display:block;color:black;clear:both;}
    .lt_app_download .lt_app_img span a{color:white;}
    .lt_app_download .lt_app_img span:nth-child(3){width:150px;background:#75c940;float:right;height:50px;line-height:50px;border-radius:4px;margin-top:-160px;}
    .lt_app_download .lt_app_img span:nth-child(3):hover{background:#51c60a;}
    .lt_app_download .lt_app_img span:nth-child(4){width:150px;background:#ff6fa2;float:right;height:50px;line-height:50px;border-radius:4px;margin-top:-95px;}
    .lt_app_download .lt_app_img span:nth-child(4):hover{background:#f94c89;}
    .lt_app_download:hover .lt_app_img{display:block}
    </style>
    
    <div class="lt_app_download">APP下载
        <div class="lt_app_img">
            <img src="http://test.vxxv.vip/wp-content/uploads/2021/03/00001.png" />
            <span>假装这里有一张二维码</span>
            <span><a href="http://test.vxxv.vip" target="_blank">Android版本下载</a></span>
            <span><a href="http://test.vxxv.vip" target="_blank">iPhone版本下载</a></span>
        </div>
    </div>

    请登录之后再进行评论

    登录
  • 任务
  • 偏好设置
  • 到底部
  • 帖子间隔 侧栏位置: