jqueryの使用ホバーメニューのstopPropagation（）

Question

event .stopPropagation（）（または他のもの）を次のような状況で使用する方法。 サブメニュー付きの標準メニューがあります。サブメニューの背景には、親にpseuso-element（背景：緑色）を重ねる必要がある背景イメージがあります。 jqueryではコントロールの疑似要素をコントロールできません（私はコントロールの不透明度が必要です）、私は親クラスに別のクラスを追加します。 必要なものはすべて動作しますが、親クラスを追加/削除すると画像の背景が点滅します。

jsfiddle

my site live (top menu is my problem)

HTML: 
<ul class="top-menu"> 
<li> 
    <a href="#">link 1</a> 
    <div class="submenu"> 
    <ul> 
    <li><a href="#">sublink 1</a></li> 
    <li><a href="#">sublink 2</a></li> 
    <li><a href="#">sublink 3</a></li> 
    <li><a href="#">sublink 4</a></li> 
    <li><a href="#">sublink 5</a></li> 
    </ul> 
    </div> 
</li> 
<li><a href="#">link 2</a></li> 
<li><a href="#">link 3</a></li> 
</ul> 

あなたはこれを試してみました

  $(".submenu a").mouseover(function(e){ 
       $(".submenu").addClass("myclass"); 
      }).mouseout(function(e){ 
       var cover = $(".submenu"); 
       cover.data('timer', setTimeout(function(){ 
        cover.removeClass("myclass"); 
       }, 2000) 
      ); 
       e.stopPropagation(); 
      }); 

CSS

*{ 
    box-sizing:border-box; 
} 
ul.top-menu { 
    display:flex; 
    list-style:none; 
    text-transform:uppercase; 
    width:100%; 
    justify-content:center; 
    background:white; 
    position:relative; 
} 
ul.top-menu li a { 
    color:black; 
    padding:10px; 
    text-decoration:none; 
    display:block; 
} 
.submenu { 
    position:absolute; 
    background:red url("http://www.metalclays.com/content/images/thumbs/0002871_texture-tile-fireworks_100.jpeg"); 
    background-position:right top; 
    background-size:200px auto; 
    background-repeat:no-repeat; 
    width:100%; 
    top:100%; 
    left:0; 
    z-index:0; 
} 
.submenu:after { 
    content:""; 
    background:green; 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    opacity:0; 
    z-index:-1; 
} 
.submenu.myclass:after { 
    opacity:1; 
} 
.submenu ul { 
    list-style:none; 
} 
.submenu a { 
    color:white; 
    display:block; 
} 

Answer 1

jqueryの？

$(".submenu a").mouseover(function(e){ 
    $(".submenu").addClass("myclass"); 
}).mouseout(function(e){ 
    e.preventDefault(); 
    $(".submenu").removeClass("myclass"); 
}); 

Answer 2

が、親にクラスを削除すると、画像の背景を使用すると、クラスを追加し、追加マウスオーバーのため、この問題が発生した

を点滅させます/追加します。

$(".submenu a").mouseover(function(e){ 
    $(".submenu").addClass("myclass"); 
}) 

へ：

$(".submenu a").mouseover(function(e){ 
    if ($(".submenu.myclass").length == 0) { 
     $(".submenu").addClass("myclass"); 
    } 
}) 

updated fiddleから変更します。