jquery verwenden .stopPropagation() im Hover-Menü

Question

So verwenden Sie Ereignis. StopPropagation() (oder etwas anderes) in der folgenden Situation. Ich habe ein Standardmenü mit Untermenü. Im Hintergrund des Untermenüs habe ich ein Hintergrundbild, das ich überlagern muss, um pseuso-element (background: green) auf dem Elternelement hinzuzufügen. Da ich mit jquery keine CSS-Pseudo-Elemente steuern kann (ich brauche Kontroll-Opazität), füge ich meinem Elternteil eine weitere Klasse hinzu. Alles funktioniert wie ich brauche, aber das Hinzufügen/Entfernen der Klasse auf Eltern lässt den Bildhintergrund blinken.

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> 

jquery

  $(".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

Sie dies versucht haben?

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

Answer 2

aber das Hinzufügen/auf Eltern, die Klasse zu entfernen macht das Bild Hintergrund

blinken

Dies geschieht, weil auf Mouseover Sie die Klasse hinzufügen, und fügen. Ändern Sie von:

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

zu:

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

Die updated fiddle.