doragoverの際にstyleの変更と文字の出現を実装したい

前提・実現したいこと

ファイルをドラッグ＆ドロップで選択するページを作成しています。
ドロップ可能エリアをbody全体にしたいので、それがわかるように「dragover」時に色をうっすら変えて、
なおかつ「添付するファイルをドロップしてください」と画面の真ん中に大きく表示させたいです。

発生している問題・エラーメッセージ

下記に記載します該当コードが現段階のものですが、
これでファイルをdragoverすると、次の画像のようにdragoverとdragleaveが一瞬ずつ発生して止まりません。
もちろん、望んでいる実装ではなく、ピロピロとおかしな挙動になります。

JavaScriptの記述コードの「//★」で示しているところがおかしいのか、何かが足りないのか、調べてもわかりませんでした。
どうか皆様の知識をお貸しください。

該当のソースコード

html
1<html>
2<head>
3    <meta charset="utf-8"/>
4    <title>DnDテスト</title>
5</head>
6<body>
7    <div id="dragAreaMoji" class="none">添付するファイルを<br>ドロップしてください</div>
8    <form action="abc.php">
9        メモ：<input type="text" name="memo">
10        日付：<input type="date" name="updatetimestamp">
11        <div class="answerarea">
12    		<div class="attachFile">
13    			<input type="file" id="file">
14    		</div>
15    	</div>
16    </form>
17    <div class="submit_area">
18        <input type="submit" value="submit">
19    </div>
20</body>
21</html>

javascript
1<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
2    <script>
3        $(function(){
4             let input_file = document.getElementById('file');
5            //--------------------------------------------------------------------
6            //drag & dropイベント-------------------------------------------------
7            // 指定部分の上に乗っかっているときの処理
8        	$("body").on("dragover", function(e){
9        	    console.log("dragover"); //動作確認用
10        		e.preventDefault();
11        		$("body").addClass("dragarea");
12        		$("#dragAreaMoji").removeClass("none"); //★
13        		$("#dragAreaMoji").addClass("drop_moji"); //★
14        	});
15        	
16        	//指定部分から外れたとき
17        	$("body").on("dragleave", function(e){
18        	    console.log("dragleave"); //動作確認用
19        		e.preventDefault();
20        		$("body").removeClass("dragarea");
21        		$("#dragAreaMoji").addClass("none"); //★
22        		$("#dragAreaMoji").removeClass("drop_moji"); //★
23        	});    	
24        
25        	// 指定部分でドロップしたときの処理
26        	$("body").on("drop", function(e){
27        		e.preventDefault();
28        		input_file.files = e.originalEvent.dataTransfer.files;
29        		$("body").removeClass("dragarea");
30        		$("#dragAreaMoji").addClass("none"); 
31        		$("#dragAreaMoji").removeClass("drop_moji"); 
32        	});
33        	//------------------------------------------------------------------
34        });
35    </script>

css
1    <style>
2        .none{
3            display:none;
4        }
5        .drop_moji{
6            color:white;
7            text-shadow: 1px 2px 2px #676767;
8            width: 99%;
9            height: 45vh;
10            font-size: 36px;
11            text-align: center;
12            padding-top: 42vh;
13            position: absolute;
14        }
15        .dragarea{
16            opacity:0.3;
17            background-color:#ebebeb;
18            mix-blend-mode: overlay;
19        }
20    </style>