javascriptのマウスオーバーイベントがうまく機能しません。

###前提・実現したいこと
javascriptでマウスオーバーされたときに画像の上にもう一枚画像を重ねて表示し、マウスアウトしたときにその重ねた画像を削除するという処理を行いたいのですが、うまく処理できません。

###発生している問題
エラーメッセージは出ておらずマウスオーバーしたときに画像は表示されるのですが、ひたすらその重ねた画像が点滅している感じです。上に重ねているため、下の画像のマウスオーバー、マウスアウトのイベントが何度も行われているのだと思います。

###該当のソースコード

HTML
1<div class="proimg">
2   <img src="IMG/my.jpg"width=""height="" alt="プロフィール画像">
3</div>

css
1.proimg{
2    positon:relative;
3}
4.pluspro{
5    position: absolute;
6    top:0;
7    left:0;
8}

javascript
1var proimgarea = document.querySelector(".proimg");
2var cover_img = document.createElement("img");
3cover_img.src = "IMG/add.png";
4cover_img.classList.add("pluspro");
5
6proimgarea.addEventListener("mouseover",function(){
7        proimgarea.appendChild(cover_img);
8},false);
9proimgarea.addEventListener("mouseout",function(){
10        proimgarea.removeChild(cover_img);
11},false);