jquery hove 设置移入显示移出隐藏 并让图片跟随鼠标移动的时候出现闪烁问题的解决方法

解决方法： 在e.clientX和e.clientY后面多加一些像素 我在这多加了20 加的像素过小 快速移动鼠标的时候也会出现闪烁的问题 因为我们鼠标移入了定位的盒子里导致出现了hover移出的效果触发了移出的函数内容，我们要避免这种情况的出现。

一切js操作实现的必须要求是 要先连接我们下载的的jquery的js代码 jquery.min.js这个是压缩过后的js代码

html代码

		<div class="box">
		     <div class="check"><img src="./images/K1.jpg" alt=""></div>
		      <div class="check"><img src="./images/K2.jpg" alt=""></div>
		      <div class="check"><img src="./images/K3.jpg" alt=""></div>
		</div>
		<div class="content">
		      <img src="" alt="">
		</div>

js代码

$(".box .check").hover(function(){
            $(this).on("mousemove",function(e){
                $(".content").css({"display":"block","left":e.clientX+20,"top":e.clientY+20});
            })
            let a = $(this).find("img").attr("src");
            $(".content img").attr("src",a);
        },function(){
            $(".content").css({"display":"none"});
        })

css样式

*{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 300px;
            margin: 200px auto;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            border: 10px solid #ccc;
        }
        .box .check{
            display: flex;
            height: 200px;
            width: 30%;
            background-color: teal;
            border: 5px solid violet;
            cursor: pointer;
        }
        .check img{
            width: 100%;
            height: 100%;
        }
        .content{
            width: 400px;
            height: 300px;
            background-color: thistle;
            position: absolute;
            display: none;
        }
        .content img{
            width: 100%;
            height: 100%;
}

效果：