Utilisation de jquery .stopPropagation() dans le menu déroulant

Question

Comment utiliser l'événement .stopPropagation() (ou quelque chose d'autre) dans la situation suivante. J'ai un menu standard avec sous-menu. Dans l'arrière-plan du sous-menu, j'ai une image de fond dont j'ai besoin pour superposer l'ajout de pseuso-element (background: green) sur le parent. Parce qu'avec jquery je ne peux pas contrôler les pseudo-éléments css (j'ai besoin d'une opacité de contrôle), j'ajoute une autre classe à mon parent. Tout fonctionne comme j'ai besoin, mais l'ajout/suppression de la classe sur le parent fait clignoter l'arrière-plan de l'image.

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

avez-vous essayé?

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

Answer 2

mais l'ajout/suppression de la classe parent fait sur l'arrière-plan de l'image clignote

Cela se produit parce que le mouseover vous ajoutez et ajoutez la classe. Changer de:

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

à:

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

Le updated fiddle.