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

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

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

    <style type="text/css">
    .lmlblog{
    position:relative;
    width:300px;
    margin:auto;}
    .lmlblog span{
    position:absolute;
    z-index:990;
    top:20px;      /*上距离*/
    left:-100px;  /*左距离*/
    display:none;}
    </style>
    <div class="lmlblog">
    <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;}
    #lmlblog{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="lmlblog">
    <img src="http://img.bokequ.com/wp-content/uploads/zfb.jpg" />
    </div>
    <script type="text/javascript">
    function showImg(){
    document.getElementById("lmlblog").style.display='block';
    }
    function hideImg(){
    document.getElementById("lmlblog").style.display='none';
    }
    </script>