鼠标经过文字显示隐藏图片css样式

鼠标经过文字显示隐藏图片css样式，js鼠标经过文字显示图片预览效果，css如何实现鼠标移至文本上显示文字或图片。jQuery鼠标经过文字显示二维码代码。

这是一个比较简单的鼠标悬停经过文本显示二维码图片js效果，鼠标离开隐藏图片，代码简洁，显示位置上下左右可自己调整，目前非常的流行，多用于网站微信、微博关注，二维码支付等。代码通过javascript来实现，文本也可以换成图标等，需要的朋友可参考下。

1、js鼠标经过文字显示图片代码参考一

<style type="text/css">
.bokequ{
position:relative;
width:300px;
margin:auto;}
.bokequ span{
position:absolute;
z-index:990;
top:20px;      /*上距离*/
left:-100px;  /*左距离*/
display:none;}
</style>
<div class="bokequ">
<span id="tupian">这里可以放图片地址</span>
<a href="#" id="pic">关注</a>
</div>
<script language="javascript">
document.getElementById("pic").onmouseover = function(){
document.getElementById("tupian").style.display='block';
}
document.getElementById("pic").onmouseout = function(){
document.getElementById("tupian").style.display='none';
}
</script>

2、js鼠标经过文字显示图片代码参考二

<style type="text/css">
#shang{text-decoration:none;
font-size: 28px;
line-height: 38px;
position: relative;
display: block;
width: 38px;
height: 38px;
margin: 0 auto;
-webkit-user-select: none;
text-align: center;
vertical-align: middle;
color: #fff;
border: 1px solid #f1b60e;
border-radius: 50%;
background: #fccd60;}
#bokequ{display:none;height:60px;position:absolute;left:230px;z-index:990;}
</style>
<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()" id="shang">赏</a>
<div id="bokequ">
<img src="http://img.bokequ.com/wp-content/uploads/zfb.jpg" />
</div>
<script type="text/javascript">
function showImg(){
document.getElementById("bokequ").style.display='block';
}
function hideImg(){
document.getElementById("bokequ").style.display='none';
}
</script>

文章末打赏显示地址http://www.bokequ.com/wo/life/man/95.html