WordPress建站教程：使用JS和CSS实现微信二维码显示或隐藏

在使用WordPress建站的过程中，很多时候我们想在网站的头部加上微信图标，当鼠标放到微信图标上以后显示微信二维码图片。效果如下图：

这篇WordPress教程里我们就向大家介绍一下实现的方法，原理是通过使用JS来控制DIV显示或隐藏。

1. 切换到主题目录，打开header.php文件，在标签之前加入以下代码：

<script type="text/javascript">
	function  showImg(){
		document.getElementById("wechat-image").style.display='block';
	}
	function hideImg(){
		document.getElementById("wechat-image").style.display='none';
	}
</script>

function showImg(){

document.getElementById("wechat-image").style.display='block';

}

function hideImg(){

document.getElementById("wechat-image").style.display='none';

}

</script>

注：wechat-image是二维码图片所在DIV的ID。

2. 在想要显示二维码的地方加入以下HTML代码：

<div id="wechat">
	<a href="javascript:void(0);" onMouseOut="hideImg()"  onmouseover="showImg()">
		<img src="https://www.91wordpress.com/wp-content/themes/91wordpress/images/wx-icon.png" alt="wechat">
	</a>
</div>

<div id="wechat-image" style="display: none;">
	<img src="https://www.91wordpress.com/wp-content/uploads/2015/07/code.jpg" alt="wechat">
</div>

</a>

</div>

</div>

3. 加入以下CSS代码美化外观

#header #wechat{
	position: absolute;
	z-index: 111;
	height: 50px;
	width: 50px;
	right:280px;
	top:5px;
}
#header #wechat img{
	width: 50px;
	height: 50px;
}
#header #wechat-image{
	display: none;
	position: absolute;
	z-index: 115;
	top:60px;
	right:280px;
}

#header #wechat{

position: absolute;

z-index: 111;

height: 50px;

width: 50px;

right:280px;

top:5px;

}

#header #wechat img{

width: 50px;

height: 50px;

}

#header #wechat-image{

display: none;

position: absolute;

z-index: 115;

top:60px;

right:280px;

}

点击此处查看完整效果