自己写了个小效果，但是不知道为什么一直不是很顺畅。老是闪。

2016-07-14 03:30:03 170 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

RAGFlow API 实战指南：从数据集管理到智能对话本文提供了RAGFlow API的实战指南，详细介绍了如何从零开始构建基于检索增强生成（RAG）的智能应用。内容涵盖环境准备、API密钥获取、核心概念理解，以及通过API进行数据集创建与管理、文档上传解析、知识块管理、检索测试，最终创建并配置智能聊天助手，实现基于私有知识库的精准对话。阅读详情

我想要的效果是：鼠标指就出现一个遮挡层。
鼠标离开对象，遮挡层就消失。
我用了两种方法都是这样。鼠标一移动遮挡层就消失，然后又出现。这样闪啊闪啊。
是我的CODE有哪里不对吗？请大神来帮帮我，教教我怎么优化，谢谢。
下面是我的CODE



<!DOCTYPE>

<html>

<head>

<meta charset = "utf-8" />

<script src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

<script>

//$().ready(function(){

//$(".div1").mouseover(function(){ 

//$(".div2").show();

//} )

/*$("img").mouseenter(function(event){

event.stopPropagation();

$(".div2").stop().css("display","inline");

} )

.mouseleave(function(event){

event.stopPropagation();

$(".div2").stop().css( "display", "none");

} )

 } )

 */

 $().ready(function(){

 $(".div1").mouseenter(function(){

  $(".div2").clearQueue();

 $(".div2").addClass("modal");

 } )

 .mouseleave(function(){

 $(".div2").clearQueue();

 $(".div2").removeClass("modal");

 } )

 })

</script>

<style>

.div1 {

width:100px;

height:100px;

}

img {

width:100px;

}

.modal {

width:100px;

height:100px;

background-color:grey;

position:absolute;

left:8px;

top:0;

opacity:0.6;

}

</style>

</head>

<body>

<div class = "div1">

<div>

<img src = "6011443968.jpg">

</div>

</div>

<div class = "div2" >

</div>

</body>

</html>