利用JQuery实现鼠标移动到图片上方的时候显示二维码，离开的时候不显示二维码

╰+哭是因爲堅強的太久メ 2022-09-26 02:27 78阅读 0赞

### 今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码，离开的时候不显示二维码的功能。 ###

其实主要注意几点细节就可以轻松实现这样的功能了，第一点就是设置一个div不显示并且位置设置好，第二点就是利用JQuery中监听鼠标的方法来监听鼠标的移动或者离开。

理论就这些，下就给出一个具体的例子详细的介绍一下该过程是如何实现的。

<footer>
        <p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p>
        <div id="tbox">
            <div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none">
                <img src="images/weixing-ma.jpg">
            </div>
            <div style="float:right;"><a id="togbook" href="#"></a></div>
            <div style="float:left"><a id="gotop"></a></div>
        </div>
    </footer>
    
    <script type="text/javascript">
        $("#gotop").click(function () {
            var speed=200;//滑动的速度
            $('body,html').animate({ scrollTop: 0 }, speed);
            return false;
        });
    
        $("#togbook").on('mouseover',function(){
            $("#log_id").css("display","block");
        });
    
        $("#togbook").on('mouseout',function(){
            $("#log_id").css("display","none");
        });
    </script>

先来解释一下上面的代码，mouseover指的是当鼠标移动到”\#togbook”这个div的上方的时候就会触发该函数，然后执行div显示的代码。

mouseout指的是当鼠标从”\#togbook”这个div的上方离开的时候就会触发该函数，然后执行div隐藏的代码。通过这两个简单函数就可以实现该过程了。

这里div显示位置，大家可以自己设置，我是将这个div设置在左上面。

运行截图：

![Center][]

**如博客内容有问题或有疑义，请及时提出，不甚感谢。本人QQ：208017534**

[Center]: /images/20220717/91da680ae340413e8ab8fe2652b34501.png