素材分享：原生鼠标悬停微信图标显示二维码效果

原生鼠标悬停微信图标显示二维码效果,原素材来自懒人之家，但是我想用的是悬停到右侧，所以自己稍微改动了一下，有需要的朋友可以直接拿走用，如果想让悬停到左侧的话就自己稍微改动一下吧。
效果：![](https://img.huzhan.com/blog/20181103/20181541256854715.jpg)

```html
<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{width:30px; height:30px; display:block; position:absolute; left:0; top:0;background:url(http://img.php.cn/upload/article/000/000/003/5b596254afbad676.png) no-repeat center top; }
.weixin .weixin_nr{width:100px; height:120px; padding:10px; background:#fff; text-align:center; position:absolute; left:-45px; top:45px; display:none;}
.weixin .weixin_nr img{ margin-bottom:5px;}
.weixin .weixin_nr .arrow{ width:0; height:0; border-bottom:10px solid #fff;border-left:10px solid transparent;border-right:10px solid transparent; position:absolute; left:50px; top:-10px;}
.weixin.on .weixin_nr{ display:block;}
.weixin.on a{ background:url(http://img.php.cn/upload/article/000/000/003/5b596254afbad676.png) no-repeat left bottom;}
</style>

<div class=>
	<a href="javascri-pt:;"></a>
    <div class=>
    	<div class=></div>
        <img src="http://img.php.cn/upload/article/000/000/003/5bc9394bce960233.gif" width="100" height="100" />
        关注官方微信
    </div>
</div>
```
我自己用需要悬停到右侧的效果（稍微加了一些阴影，避免在纯白色背景下效果不好）：![](https://img.huzhan.com/blog/20181103/20181541256897261.jpg)
代码如下：
```html
<style>
.weixin{width:30px;height:30px;margin:100px auto;position:relative;font-size:12px;text-align:center}
.weixin a{width:30px;height:30px;display:block;position:absolute;left:0;top:0;background:url(http://demo.lanrenzhijia.com/2015/weixin0512/images/weixin.png) no-repeat center top}
.weixin .weixin_nr{width:100px;height:120px;padding:10px;background:#fff;text-align:center;position:absolute;left:45px;top:-45px;display:none;box-shadow:1px 1px 15px rgba(0,0,0,.3)}
.weixin .weixin_nr img{margin-bottom:5px}
.weixin .weixin_nr .arrow{width:0;height:0;border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;top:50px;left:-10px}
.weixin.on .weixin_nr{display:block}
.weixin.on .weixin_nr span{display:block;color:#333;margin-top:-3px;line-height:16px;text-align:center}
.weixin.on a{background:url(http://demo.lanrenzhijia.com/2015/weixin0512/images/weixin.png) no-repeat left bottom}
</style>

<div class=>
	<a href="javascri-pt:;"></a>
    <div class=>
    	<div class=></div>
        <img src="http://demo.lanrenzhijia.com/2015/weixin0512/images/weixin.jpg" width="100" height="100" />
        <span>关注官方微信</span>
    </div>
</div>
```

已有 1 条评论

Ta的最新文章

最近评论

标签大全

阅读目录