鼠标经过小图标显示图片

一段js代码：

function showImg(){ 
document.getElementById("wxImg").style.display='block'; 
} 
function hideImg(){ 
document.getElementById("wxImg").style.display='none'; 
}

一段html代码：

<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()">
<i style="color: green;" class="fa fa-weixin fa-fw"></i> <!-- 这里放置小图标 --> </a>
<div id="wxImg" style="display:none;height:50px;back-ground:#f00;position:absolute; left:40px;">
<img src="images/weixin.png" alt="鼠标经过小图标显示图片"> <!-- 这里为显示的大图 --> </div>

使用：

① 在header文件中加载上面的js代码

<script src="js/weixin.js" type="text/javascript"></script>

② 在你需要放置小图标位置放置html 代码即可

本站微信图就是使用此代码！

鼠标经过小图标显示图片

Lzay