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

最新推荐文章于 2022-03-22 15:33:10 发布

m0_52152932

最新推荐文章于 2022-03-22 15:33:10 发布

阅读量660

点赞数

分类专栏： jQuery 文章标签： html javascript jquery css js

本文链接：https://blog.csdn.net/m0_52152932/article/details/113357716

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

解决方法：在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%;
}