javascript - jquery 在悬停菜单上使用 .stopPropagation()

Question

如何在以下情况下使用事件 .stopPropagation()(或其他方法)。我有一个带子菜单的标准菜单。在子菜单背景中，我有背景图像，我需要在父级上叠加添加伪元素(背景:绿色)。因为使用 jquery 我无法控制 css 伪元素(我需要控制不透明度)，所以我向父级添加了另一个类。一切都按我的需要工作，但是添加/删除父级上的类会使图像背景闪烁。

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>

j查询

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

你试过吗？

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